JavaScriptで を上手く扱う。
さて、こないだの記事で "半角スペース" と " " は違うのだ、ということを書きました。
例えばこんなHTMLがあったとします。
<div id="s">It's been a long time</div>
ブラウザ上では、こう見える。
It's been a long time
div id="s" の innerHTML を見てみると…
<script>
alert( document.getElementById('s').innerHTML );
</script>
alert( document.getElementById('s').innerHTML );
</script>
★実行結果 = It's been a long time
一方、テキストノードの値を見てみると…
ということなので、「要素のinnerHTMLを取得して、全てのホワイトスペースを別の文字に置換したい」ときに、
<script>
var s = document.getElementById('s');
alert( s.innerHTML.replace( /\s/g , '**' ));
</script>
var s = document.getElementById('s');
alert( s.innerHTML.replace( /\s/g , '**' ));
</script>
★実行結果 = It's**been a**long time
…と、 が残ってしまいます。正しくは、こう。
<script>
var s = document.getElementById('s');
alert( s.innerHTML.replace( /\s| /g , '**' ));
</script>
var s = document.getElementById('s');
alert( s.innerHTML.replace( /\s| /g , '**' ));
</script>
★実行結果 = It's**been**a**long**time
「テキストノードの値を操作して同様の結果を得る」場合は、
でOK。
今回の場合はHTMLの構造が判っているので、もう最初から決め打ちで要素の firstChild を取得→処理していますが、実際には子要素の種類を吟味したりするコードも必要ですね。
それから、正規表現 /\s/ は「全てのホワイトスペース」にマッチします。つまり上記HTMLに改行コードやタブが含まれていた場合には、それらも '**' に置換されてしまうわけです。
もし半角スペースと のみを置換したい場合は、マッチさせる正規表現を…
- innerHTMLの場合：/\u0020| /
- nodeValueの場合：/\u0020|\u00A0/
みたいな感じにしてみれば良いのではないかいな。
→ 【参考】正規表現 - JavaScript | MDN
コメント