日本語単語で改行してくれるmikan.jsを改行タグ、半角タグ対応

mikan.jsとは

mikan.js : 機械学習なしで、日本語の単語の改行を処理するライブラリを書いた
git :: mikan.js
@trkbt10 さんが作った、日本語単語の途中で改行されたりせず、単語単語で改行してくれるという便利なもの。
お客さんが改行位置に煩い人がたまにいる時にb

ただこのままだと半角スペースで挿入したものが無視されてしまったり、
改行タグが加工されてしまって文字として表示されてしまったり、
といった部分があったので正規化部分とかちょっと変えてみた。
ほんとちょっと。

弄った場所

正規表現部分

var keywords = /([\(（「『]+.*?[\)）」』]|[a-zA-Z0-9]+\.[a-z]{2,}|[一-龠々〆ヵヶゝ]+|[ぁ-んゝ]+|[ァ-ヴー]+|[a-zA-Z0-9]+|[ａ-ｚＡ-Ｚ０-９]+)/g;

↓

var keywords = /([\(（「『]+.*?[\)）」』]|\&nbsp;|<br>|[a-zA-Z0-9]+\.[a-z]{2,}|[一-龠々〆ヵヶゝ]+|[ぁ-んゝ]+|[ァ-ヴー]+|[a-zA-Z0-9]+|[ａ-ｚＡ-Ｚ０-９]+)/g;

keywordに と<br>を追加

spanで囲む部分

var html = words.map(function(word) {
  return '<span' + attr +'>' + word + '</span>'
}).join('');

↓

var html = words.map(function(word) {
  let inattr = word == "<br>" ? "" : attr;
  return '<span' + inattr +'>' + word + '</span>';
}).join('');

雑なやり方だけど。brの時はinline-blockさせないようにします。

mikan.jsを使う部分

function startMikan(){
        var sampleElement = document.getElementsByTagName('p');
        var changeMikan = function(elm){
            elm.innerHTML = Mikan(elm.innerHTML.replace(/ /g, " "));
        }
        for(var i=0; i < sampleElement.length; i++){
            let elm = changeMikan(sampleElement[i]);
        }
}
startMikan();

p タグで囲んだ部分を全て取得し、回し、半角で入力している部分を に置換しました。
（最初からそう書いておけばいいんだけどすればいいんだけど面倒くさくて）

やってみてわかったこと

スマホのドキュメントでmikan.jsを使用してみたのですが、なかなかどうしてキレイにはなりませんでした。
カタカナとか長くなってしまうものが多いため
結構凸凹具合が目立つ…。
特にスマホだと改行が多くなるので目立つかな。

ちょっとした見出しなどに使うくらいが丁度良さそう。