入力した文字列から
指定したパターンに一致した文字と
一致しなかった文字を取得してみる
ということをやりたくて正規表現を使って書いてみた例です
今回書いたコードで使っている正規表現
漢字、ひらがな、カタカナ、半角カタカナ、半角英数、全角英数で区切りたくて
このように書いています
/[々〆〇〻㐂-頻]+|[ぁ-ゟー]+|[゠-ヿ]+|[ｦ-ﾟ]+|[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]+|[ａ-ｚＡ-Ｚ０-９]+/g
var pattern2 = /[^々〆〇〻㐂-頻ぁ-ゟー゠-ヿｦ-ﾟa-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で出力してみるとこうなっていました
〇 が 〇
゠ が ゠
になっている
このままでは使えないのでそれぞれを16進数にしてみる
〇 を \u3007
゠ を \u30a0
にして以下のようにpatternとpattern2のコードを置き換えてみるとうまくいきました
var pattern = /[々〆\u3007〻㐂-頻]+|[ぁ-ゟー]+|[\u30a0-ヿ]+|[ｦ-ﾟ]+|[a-zA-Z0-9]+|[ａ-ｚＡ-Ｚ０-９]+/g
var pattern2 = /[^々〆\u3007〻㐂-頻ぁ-ゟー\u30a0-ヿｦ-ﾟa-zA-Z0-9ａ-ｚＡ-Ｚ０-９]/g
