Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

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

mikan.jsとは

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

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

弄った場所

正規表現部分

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

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

keywordに&nbsp;<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 タグで囲んだ部分を全て取得し、回し、半角で入力している部分を&nbsp;に置換しました。
(最初からそう書いておけばいいんだけどすればいいんだけど面倒くさくて

やってみてわかったこと

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
6
Help us understand the problem. What are the problem?