カテゴリー
未分類

JavaScriptでWebページのテキストを方言などに変換するためのテキスト置換ライブラリ

JavaScriptでWebページ上のテキストを方言に変換するために、ページ上のテキスト置換を簡単に行えるJavaScriptのライブラリを作りました。デモではページ上にある「私」という文字列を「わたし」に変換し、「です。」を「で御座います。」に変換しています。

デモ: http://setouchi.github.io/namari/
ソースコード: https://github.com/setouchi/namari

使い方

すぐ使うなら以下のタグを貼り付けるだけで動作します。rawgitのCDNを使っています。

<script src="https://cdn.rawgit.com/setouchi/namari/gh-pages/namari.js"></script>
<script>
  window.addEventListener('load', function() {
    new Namari().replace([
        { regex: /私/g, text: 'わたし' },
        { regex: /です。/g, text: 'で御座います。' }
    ]);
  }, f
</script>

jQueryを使っている環境ならこれで動作します

<script src="https://cdn.rawgit.com/setouchi/namari/gh-pages/namari.js">
<script>
$(function() {
  new Namari().replace([
      { regex: /私/g, text: 'わたし' },
      { regex: /です。/g, text: 'で御座います。' }
  ]);
});
</script>

importして使う場合はこのようにします

import Namari from './src/core.js';
window.addEventListener('load', function() {
new Namari().replace([
{ regex: /私/g, text: 'わたし' },
{ regex: /僕/g, text: 'ぼく'   }
]);
}, false);

経緯

ギャル文字変換というサイトが昔からあります。ああいうのを動的に実装するために作成しました。タグを貼り付けるだけでページがギャルっぽくなったら楽しいですよね。しかし、置換ライブラリ作った段階で力付きました。

本体は./src/core.jsですので、ぜひこれをimportして置換パターン込みJSをビルドしてもらって再配布したりしてください!

特にgalgo.jsとか、kansaiben.jsとか、okayamaben.jsなどを期待しております!難しい技術に関する事を書いているのに、ギャル語になってたりしたら面白いですよねw

技術メモ

置換はテキストノード単位で行っているため要素をまたぐテキストノードの置換には対応していません。<span>h<u>o</u>ge</span>という構造の場合、/hoge/で置換することはできないのです。

これに対応する場合はテキストノードを一文字ずつ分解、マッピング、置換して最後にノーマライズする必要があると思うんですが、実際に実装してみたら置換処理が長くなってIEなどでは動作がもっさりとなります。したがって、速度を重視したシンプルなテキストノード単位の置換としました。

でも複雑な方言置換を極めて行くと、長文に対して置換をかけることがあるかもしれません。そんな素敵な正規表現を書いてもらえる程になったら実装してみようかと思います。速度の関係もあると思うので、別の機能としてdeepReplaceみたいなオプションを実装してみますw

ちなみに、document.body.innerHTMLを直接置換することでもっと処理を実装を簡略化できますが、その場合は中身のHTMLが傷ついて要素が壊れたり、バインドされているイベントが消えてしまうと思います。特に要素の属性の中身にまで置換処理が及ぶのは避けたいです。よって、テキストノードのnodeValueそのものを置換することで、その辺りのデリケート部分を保護することにしました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA