LANG SELRCT

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

2018年5月2日水曜日

正規表現を書いてmatchで抽出する


正規表現を変数にして一致する文字を出力する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(出力エリア)に一致する文字列を出力する