LANG SELRCT

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

2018年4月15日日曜日

入力された文章を指定した文字で置換する


入力された文章を以下のように変更したい

  • 特定の文字の後で改行を入れる
  • 特定の文字を削除する
  • 特定の文字を別の文字に置換する


作ったもの


デモ(Apps Script)
https://script.google.com/macros/s/AKfycbxtOVIOMDb1mVUV5UvljHytpHrqwHAVrdvLyUxf5TOIoSq_nbOb/exec



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




index.html
<!DOCTYPE html>
<html>
  <head>
    <style>
    .ta {
      width: 360px;
      height: 120px;
    }
  </style>
  </head>
  <body>
    <textarea id="ta" class="ta"></textarea>
    <br>
    <input type="text" id="tb" class="tb">を 
    <button id="break_bt">直後で改行する</button>
    <button id="delete_bt">削除する</button>
    <br>
    <input type="text" id="tb2" class="tb">に 
    <button id="replace_bt">置換する</button>
    <br>
    <textarea id="result" class="ta"></textarea>
    <script>
      var tb = document.getElementById("tb");
      var tb2 = document.getElementById("tb2");
      var ta = document.getElementById("ta");
      var result = document.getElementById("result");
      var break_bt = document.getElementById("break_bt");
      var delete_bt = document.getElementById("delete_bt");
      var replace_bt = document.getElementById("replace_bt");
      
      break_bt.onclick = run;
      delete_bt.onclick = run;
      replace_bt.onclick = run;
      
      ta.focus();
      
      function run(){
        var flag = this.id;
        var after = get_after(flag);
        var pattern = new RegExp(tb.value, "g");
        result.value = ta.value.replace(pattern, after);
      }
      
      function get_after(flag){
        var after = "";
        switch(flag){
          case "break_bt":
            after = tb.value + "\n";
            break;
          case "delete_bt":
            after = "";
            break;
          case "replace_bt":
            after = tb2.value;
            break;
        }
        return after;
      }
    </script>
  </body>
</html>
意訳
 



taのスタイル
幅
高さ




入力用のテキストエリア

改行、削除、置換対象の文字を入れるテキストボックス
改行ボタン
削除ボタン

このテキストボックスに入力した文字に置き換える
置換ボタン

結果を出力するテキストエリア

idがtbの要素を取得
idがt2の要素を取得
idがtaの要素を取得
idがresultの要素を取得
idがbreak_btの要素を取得
idがdelete_btの要素を取得
idがreplace_btの要素を取得

taをフォーカスする

break_btがクリックされたらrunを実行する
delete_btがクリックされたらrunを実行する
replace_btがクリックされたらrunを実行する

この機能がやること
クリックされたボタンのidを取得して
get_afterに渡して結果を得る
正規表現でパターンを作成して
置換して出力する


この機能がやること
afterの入れ物を作って
渡されたflagによってafterに入れる値を変える
break_btの場合
afterにtb.value + 改行を入れる

delete_btの場合
afterには何も入れない

replace_btの場合
afterにtb2.valueを入れる

afterに入れた値を返す