JavaScriptで   を上手く扱う。

PC版へ 2014年11月01日

さて、こないだの記事で "半角スペース" と " " は違うのだ、ということを書きました。

例えばこんなHTMLがあったとします。

<div id="s">It's been&nbsp;a long&nbsp;time</div>

ブラウザ上では、こう見える。

It's been a long time

div id="s" の innerHTML を見てみると…

<script>
alert( document.getElementById('s').innerHTML );
</script>

★実行結果 = It's been&nbsp;a long&nbsp;time

一方、テキストノードの値を見てみると…

ということなので、「要素のinnerHTMLを取得して、全てのホワイトスペースを別の文字に置換したい」ときに、

<script>
var s = document.getElementById('s');
alert( s.innerHTML.replace( /\s/g , '**' ));
</script>

★実行結果 = It's**been&nbsp;a**long&nbsp;time

…と、&nbsp; が残ってしまいます。正しくは、こう。

<script>
var s = document.getElementById('s');
alert( s.innerHTML.replace( /\s|&nbsp;/g , '**' ));
</script>

★実行結果 = It's**been**a**long**time

テキストノードの値を操作して同様の結果を得る」場合は、

でOK。

今回の場合はHTMLの構造が判っているので、もう最初から決め打ちで要素の firstChild を取得→処理していますが、実際には子要素の種類を吟味したりするコードも必要ですね。

それから、正規表現 /\s/ は「全てのホワイトスペース」にマッチします。つまり上記HTMLに改行コードやタブが含まれていた場合には、それらも '**' に置換されてしまうわけです。

もし半角スペースと &nbsp; のみを置換したい場合は、マッチさせる正規表現を…

みたいな感じにしてみれば良いのではないかいな。

  → 【参考】正規表現 - JavaScript | MDN

関連記事

コメント

現在、コメント機能は停止しています。