正規表現を変数にして一致する文字を出力するUIを作ってみる
デモ
.match(
)
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.ta {
width: 360px;
height: 120px;
}
.flag {
width: 60px;
}
.text_dimgray {
color: dimgray;
}
.text_orange {
color: darkorange;
font-weight: bold;
font-size: 16px;
}
.regexp {
font-size: 16px;
}
</style>
</head>
<body>
<label class="text_dimgray">この文字列の中から一致する文字列を探したい</label>
<br>
<textarea id="input" class="ta"></textarea>
<br>
<div class="regexp">.match(
<label class="text_orange">/
<input type="text" id="tb" class="text_orange" placeholder="一致させたい文字列">/
<input type="text" id="tb_flag" class="flag text_orange" placeholder="g,i,m等">
</label>)
</div>
<br>
<label class="text_dimgray">一致する文字列</label>
<br>
<textarea id="output" class="ta"></textarea>
<script>
var tb = document.getElementById("tb");
var tb_flag = document.getElementById("tb_flag");
var input = document.getElementById("input");
var output = document.getElementById("output");
tb.onkeyup = get_result;
tb_flag.onkeyup = get_result;
function get_result() {
var target = tb.value;
var flag = tb_flag.value;
var pattern = new RegExp(target, flag);
output.value = input.value.match(pattern);
}
</script>
</body>
</html>
|
意訳taのスタイル 幅 高さ flagのスタイル 幅 text_dimgrayのスタイル 文字色 text_orangeのスタイル 文字色 文字の太さ 文字サイズ regexpのスタイル 文字サイズ ラベル インプットエリア 正規表現を入力するエリア ラベル 出力エリア idがtbの要素を取得 idがtb_flagの要素を取得 idがinputの要素を取得 idがoutputの要素を取得 tbでキーが上がったらget_resultを実行する tb_flagでキーが上がったらget_resultを実行する この機能がやること tbのvalue（正規表現）を取得して tb_flagのvalue（フラグ）を取得して 正規表現のオブジェクトを作成して output（出力エリア）に一致する文字列を出力する |
