太字の墨塗

作成日 : 1999-04-29
最終更新日 :

引き続いて正規表現に挑戦した。

前回の経験から、キーワードを明示的に指定しようと思い立った。 指定の仕方として、<B>と </B>タグで囲まれた箇所をキーワードとみなす。 そしてキーワード全体を伏せ字にする。

例:原文が「変革を迫られる中小企業と起業家精神発揮
とあれば、覚えるための墨塗文は
「変革を迫られる中小企業と*と*」
となる。

JavaScriptで次のスクリプトを書いてみた。


   let org="変革を迫られる中小企業と<B>起業家精神</B>の<B>発揮</B>";
   let result=org.replace(/<B>.*<\/B>/gi, "*");
   document.write(result);

replaceメソッドの第1引き数はこれでうまくいくか。

まず、Macintosh上で確認する。 ふだん使っているNetscape Communicator 4.04[ja]でやってみたところ、 こうなった。

変革を迫られる中小企業と*

*が一つしか出てこない。この理由はすぐわかった。 二ケ所で<B>と</B>の組み合わせが出てきている。 この置換が、最長一致したところに適用されてしまったのが原因だ。

最短一致と最長一致

対策はいろいろあるだろうが、安直な方法を考えた。つまり、 キーワードにはタグの文字が含まれないと判断して、タグに使われる文字以外の 1文字以上の並び、とすればいいだろう。この文字にBを使ってみた。

let result=org.replace(/<B>[^B]*<\/B>/gi, "*");

いざやってみたところ、エラーになってしまった。>ではない、 他の<や\/などを使ってみたが、 同じエラーが出る。

さて、Internet Explorer4.01上では、 最初の引数ではもちろん同じ結果になったが、 次の引数を試した結果は予想通り「変革を迫られる*と*」と出てきた。 ブラウザ依存の点があるので、なんとか直したいと思いつつ、まだできていない。

* を 2 個所出すもう一つの方法は、欲張りマッチをしない正規表現の記法を使うことだ。 x* は x の 0 回以上の繰り返しだが、x*? とすれば、 なるべく短い列にマッチするように変えられる。次の通り。

let result=org.replace(/<B>.*?<\/B>/gi, "*");

実際の結果はこちら。*? を使っている。

(2007-10-31)


対応ブラウザ

最初の記述から8年もたってしまった。 もう、Netscape 4.* はセキュリティの問題もあるし、 対象外としてよいだろう。対象は主に IE6, IE7, Safari, Firefox, Opera などだろうか。(2015-10-13)

さらにその後の対応ブラウザ

さらに 5 年たった。 私が確認できるのは、Windows 系統だけである。したがって、Safari は確認できない。 Google Chrome、FireFox、Microsoft Edge、SeaMonkey などである。 Opera は入れてもいいのだろうが、 Microsoft Internet Explorer は 11 でも対応できない。(2020-03-25)

document.write から element.insertAdjacentHTML へ

今まで HTML の動的な表示には document.write を用いてきたが、 もろもろの理由では document.write は非推奨となった。代わりに、 element.insertAdjacentHTML を用いるのがよい。element は、 ドキュメント ID である。 なお、element.innerHTML を推奨しているページもあるが、 書き換えが不要であれば insertAdjacentHTML を用いるのが速いとされている。

原文:

墨塗文:

まりんきょ学問所JavaScript 手習い > 太字の墨塗り


MARUYAMA Satosi