jQueryで特殊文字&#8203を除去する方法！ゼロ幅スペースの意外な落とし穴！

トップ
プログラミング
jQuery
jQueryで特殊文字&#8203を除去する方法！ゼロ幅スペースの意外な落とし穴！

スポンサードリンク

jQueryで特殊文字&#8203を除去する方法！ゼロ幅スペースの意外な落とし穴！

2016年04月08日 [jQuery]

HTMLで用意されている特殊文字には様々なものがありますが、
クライアントやサーバの環境などによってはおかしな表示や挙動をすることもあります。

私が経験した中で一番困ったのは「」という特殊記号です。

たまたま社内の業務システムで画面内の文字をコピーして貼り付けると文字化けするという問い合わせがありました。

文章をコピーして貼り付けると文字化けする？

ブラウザ上で問題の起きるページを開きます。

画面内の文章をコピーします。

コピーした文章をテキストエディタに貼り付けると・・・

1?月?端?数?（?追?加?） 1?2?6?6?0?1 ?1 ?一?式? 2 2 0 0

このような具合で文字と文字の間に「?」が含まれたり、
タブ文字が含まれたりと画面の見た目通りの文章を貼り付けられないという問題・・・。

最初はウェブページとテキストエディタの文字コードの設定を疑いましたが、見当外れでした。

jQuery 特殊文字除去

ブラウザの開発者ツールでソースを確認すると「⁮」が含まれていた

が悪さをしている

調査した末、ブラウザの開発者ツールで確認すると、
画面では見ることのできない特殊文字「」が文章内に含まれていました。

どうやらこの文字コードがテキストで変換できずに「?」と表示されるようです。

原因は特定しましたが、そもそもなんでウェブページ内の文字列に、
特殊文字が勝手に入るのだろうか？

正体はゼロ幅スペースというらしい

いろいろ調べてみてわかったことですが、
まず「」というのは「ゼロ幅スペース」というもので、文字通り幅のないスペースです。

半角スペースなどとは違い、視覚的には見ることのできないスペースとなっており、
主にブラウザの画面幅が変更された時に画面内の文字を1文字単位で折り返しできるようにするためにシステムが自動的に追加したものらしいです。

ウェブページを閲覧する分には問題はありませんが、
ページ内の文字列をコピーすれば当然、特殊文字も含まれますのでこのようなトラブルが発生してしまうという訳です。

時たまこのようなトラブルに見舞われる利用者がいるようです

余計なことしやがって・・・。

ではここからは解決方法について紹介していきます。

jQueryで特殊文字を置換削除する方法

業務システムの仕様ということだったので暫定的な措置をとりました。

今回、特殊文字が勝手に含まれてしまうHTMLのソースはすべて
特定のtableタグのみだったので、jQueryでちょちょいと置換削除するスクリプトを埋め込みました。

/**
 * (jQuery) 特殊文字「&#8203;」を除去.
 *
 * @authorよっき
 * @created 2016/04/08
 */

$(window).load(function() {
  var spChar = [
    11,   // 垂直タブ
    8203  // ゼロ幅スペース
  ];

  $("特殊文字を除去したいセレクタ指定").each(function() {
    var txtBefore = $(this)[0].innerHTML;
    var txtAfter = "";
    for (var i=0; i < txtBefore.length; i++) {
      var chr = txtBefore.charCodeAt(i);
      if (spChar.indexOf(chr) == -1) {
        txtAfter += String.fromCharCode(chr);
      }
    }
    $(this)[0].innerHTML = txtAfter;
  });
});