スポンサードリンク


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

jQuery 特殊文字 除去

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

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

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

 

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

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

jQuery 特殊文字 除去する方法

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

jQuery 特殊文字 除去する方法

コピーした文章をテキストエディタに貼り付けると・・・
  1?月?端?数?(?追?加?) 1?2?6?6?0?1 ?1 ?一?式? 2 2 0 0

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

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

jQuery 特殊文字 除去

 

スポンサードリンク

 

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

​が悪さをしている

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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

 

実はこのゼロ幅スペースは、ASCIIコードでいうと「8203」になります。

指定したセレクタ内のHTMLソースをASCII文字で判定をかけ、
「8203」と一致しなかった文字をtxtAfterに格納していきます。

最終的に完成した文字列をセレクタに埋め込んであげれば完成です。

$(window).load()関数を使用しているのでDOMが読み込み完了後に、
特殊文字を除去してくれます。ちなみに「ゼロ幅スペース」の親戚というべきか「垂直コード」の除去もするようにしています。

本当はもっとパフォーマンスの良いコーディングをしたかったのですが、即席で対応させるために作成したコードです。

 これでトラブルも解決!

いかがだったでしょうか?

上記のスクリプトを埋めんこむだけで、
「ゼロ幅スペース」と「垂直コード」を画面内から除去してくれます。

今回のケースは非常にレアではあるんですが、こういった問題も起こりうるので知識として覚えておいて損はなさそうです。

特殊文字が悪さするというパターンを今まで経験したことがなく、
問題点に気づきにくく非常に困りました。

さらに対策方法がいまいちよくわからなかったですよね。

The following two tabs change content below.
よっき
パソコンが大好きな青年。職業はプログラマ。 幼少期からパソコンが好きで、趣味がそのまま仕事になりました。 主にウェブ系コンテンツの開発が中心です。 自作PCの魅力に惹かれたのは学生時代の頃で、現在に至ります。 自作PC専門ブログで、お得な情報を紹介しています。 趣味はホームページ制作かな。起業を夢見て奮闘中の毎日!

スポンサードリンク


コメントを残す




*

このページの先頭へ