LANG SELRCT

コードを書く場所についてはこちら

2018年3月21日水曜日

漢字、ひらがな、カタカナ、英数字を正規表現で区切る


入力した文字列から
指定したパターンに一致した文字と
一致しなかった文字を取得してみる

ということをやりたくて正規表現を使って書いてみた例です

今回書いたコードで使っている正規表現
漢字、ひらがな、カタカナ、半角カタカナ、半角英数、全角英数で区切りたくて
このように書いています

/[々〆〇〻㐂-頻]+|[ぁ-ゟー]+|[゠-ヿ]+|[ヲ-゚]+|[a-zA-Z0-9]+|[a-zA-Z0-9]+/g



テキスト入力欄にテキストを入力すると
正規表現で指定したパターンを元に
漢字、ひらがな、カタカナ、英数字、それ以外で分割されて
一致したテキストと一致しなかったテキストで分割される



デモ








コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      width: 360px;
      padding: 15px;
      border-radius: 2px;
      border: solid 1px lightgray;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    }

    .center {
      text-align: center;
    }

    textarea,
    input[type='text'] {
      width: 95%;
      font-size: 15px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class='card'>
    <p>
      <label>テキスト入力欄</label>
      <input type='text' id='keywords' class='text_midium'>
    </p>
    <p>
      <label>漢字、ひらがな、カタカナ、英数字に一致</label>
      <textarea id='ta'></textarea>
    </p>
    <p>
      <label>一致しない文字</label>
      <textarea id='ta2'></textarea>
    </p>
  </div>
  <script>
    var keywords = document.getElementById('keywords')
    var ta = document.getElementById('ta')
    var ta2 = document.getElementById('ta2')

    keywords.focus()
    keywords.onkeyup = split_text

    function split_text() {
      var str = keywords.value
      var pattern = /[々〆〇〻㐂-頻]+|[ぁ-ゟー]+|[゠-ヿ]+|[ヲ-゚]+|[a-zA-Z0-9]+|[a-zA-Z0-9]+/g
      var pattern2 = /[^々〆〇〻㐂-頻ぁ-ゟー゠-ヿヲ-゚a-zA-Z0-9a-zA-Z0-9]/g
      var result = str.match(pattern)
      var result2 = str.match(pattern2)
      ta.value = result
      ta2.value = result2
    }
  </script>
</body>
</html>
意訳
  



cardのスタイル
幅
内側の余白
角丸
枠線
影


centerのスタイル
水平方向の位置


textareaと
input type='text'のスタイル
幅
文字の起きさ
外側の余白






テキスト入力欄




一致した文字の結果を入れる欄



一致しなかった文字を入れる欄



idがkeywordsの要素を取得
idがtaの要素を取得
idがta2の要素を取得

文字の入力欄をフォーカスする
文字が入力されたらsplit_textを実行する

この機能がやること
入力された文字を取得する
漢字、ひらがな、カタカナ、半角カタカナ、半角英数字、全角英数字に一致するそれぞれの正規表現
一致しない正規表現
入力された文字からpatternに一致するものを抜き出す
一致しない者を抜き出す
taにresultを入れる
ta2にresult2を入れる








補足


Apps ScriptのHTML Serviceではindex.htmlのコードで問題なく動きました

しかし、このブログで利用しているBloggerのHTMLにJavaScriptを書いて試してみると意図したとおりに分割できませんでした


以下のように「、」も一致してしまう

これを解消するために
patternとpattern2をconsole.logで出力してみるとこうなっていました
〇 が &#12295;
゠ が &#12448;
になっている


このままでは使えないのでそれぞれを16進数にしてみる

〇 を \u3007
゠ を \u30a0
にして以下のようにpatternとpattern2のコードを置き換えてみるとうまくいきました

var pattern = /[々〆\u3007〻㐂-頻]+|[ぁ-ゟー]+|[\u30a0-ヿ]+|[ヲ-゚]+|[a-zA-Z0-9]+|[a-zA-Z0-9]+/g
var pattern2 = /[^々〆\u3007〻㐂-頻ぁ-ゟー\u30a0-ヿヲ-゚a-zA-Z0-9a-zA-Z0-9]/g