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, "&nbsp;"));
        }
        for(var i=0; i < sampleElement.length; i++){
            let elm = changeMikan(sampleElement[i]);
        }
}
startMikan();

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

やってみてわかったこと

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

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

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