cssのcontentに使う日本語をunicodeに変換する用フォーム

cssのafter擬似要素やbefore疑似要素のcontentに日本語を用いる際には、unicodeに変換する必要があります。

今までは公開されているツールを使っていましたが、毎回ツールを使わせてもらうのも微妙ですし、変換だけなら難しくないと考えて自作した次第です。

上記でとりあえず変換可能なはずです。

コード

コードは以下の通りですが、jQueryなどはつかっておらずただのjsです。

<form name="unicodeTransformation">
  <input type="text" value="" id="input-text"> : <label for="input-text">変換したい文字列を入力</label><br>
  <input type="button" value="unicode変換" onclick="unicode_content()"><br>↓<br><input type="text">
</form>

function unicode_content(){
  //変換ボタンを押したら変換後の値を初期化
  document.unicodeTransformation.elements[2].value;
  var str;
  var str = document.unicodeTransformation.elements[0].value;
  //サニタイズ
  var str = str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
  //unicodeにエンコード
  var str = escape(str);
  //%uをバックスラッシュに置換し、半角スペースの%20を¥a0に置換
  var str = str.replace( /%u/g,"\\").replace( /%20/g,"\\a0");
  //変換後のinputに値をセット
  document.unicodeTransformation.elements[2].value=str;
}

参考サイト

以下のサイトを参考にしました。

• 文字列を数値に変換する
• JavaScriptで指定文字を置換、削除する方法
• JavaScriptで最低限のサニタイズをする

結び

目的の動作はできましたが、何でもかんでも変換というのは考えていないのと、サニタイズあたりが少々不安なので汎用性はあまり無いと思いますが。

Twitter

Hatena

Facebook

Pocket