幅なし空白文字ノーブレークスペースとJavaScriptのString length [JavaScript]

とあるサービスを利用した時、日本語文字列の文字数が、想定より多く取得される現象に遭遇しました。

JavaScriptのString lengthはStringオブジェクトの文字列長をUTF-16コードユニットの数で表しているため、lengthで返される値が文字列の実際の文字数と一致しなくなる可能性があります。

とは言えただのlengthを打って、目に見えている文字数と明らかに乖離した結果が返ってくるのは焦ります。

どうなっているのか確認するためChromeの開発者モードで対象のvalue値を確認したところ「​​」が挿入されていたわけです。

これは幅なしの空白文字（ノーブレークスペース、ゼロ幅スペース）と呼ばれるもので、サーバーサイドで特殊文字対策(サニタイジング)してないのか？と思いましたが、他人のサービスのためカスタマイズできないので、JavaScript側でトリムすることになりました。

とりあえず下記で行けますが、ブログサイトの表記やweb上の実行サイトなどで使うと、​が表現されないため遭遇したら自分の環境で試してください。

var str_result = "対象文字列".replace(/[\u200B-\u200D\uFEFF]/g, '');

//ターゲット文字列
var tar_char = "お​も​て​な​し";
//そのまま実行
console.log(tar_char.length); //9 お​も​て​な​し
//空白をトリムして実行
var str_result  = tar_char.replace(/[\u200B-\u200D\uFEFF]/g, '');
console.log(tar_char.length); //5 おもてなし

幅がないスペースは下記が該当します。

U + 200B
U + 200C
U + 200D
U + FEFF

https://stackoverflow.com/questions/18478847/why-is-8203-being-injected-into-my-html