LANG SELRCT

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

2018年4月15日日曜日

改行⇔カンマに置換する


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

  • 改行をカンマに置換する
  • カンマを改行に置換する


作ったもの
改行→カンマ

カンマ→改行


デモ(Apps Script)
https://script.google.com/macros/s/AKfycbyPGHfI3WyEx-ruw2ug3llMIDVSGkf3EF1-CLhAcp69aa7cxgw/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>
    <button id="break_bt">改行をカンマに変える</button>
    <button id="replace_bt">カンマを改行に変える</button>
    <br>
    <textarea id="result" class="ta"></textarea>
    <script>
      var tb = document.getElementById("tb");
      var ta = document.getElementById("ta");
      var result = document.getElementById("result");
      var break_bt = document.getElementById("break_bt");
      var replace_bt = document.getElementById("replace_bt");

      ta.focus();      

      break_bt.onclick = run;
      replace_bt.onclick = run;
      
      function run(){
        var before;
        var after;
        var flag = this.id;
        if(flag == "break_bt"){
          before = "\n";
          after = ", ";
        } else if(flag == "replace_bt"){
          before = ",[  ]*";
          after = "\n";
        }
        var pattern = new RegExp(before, "g");
        result.value = ta.value.replace(pattern, after); 
      }
    </script>
  </body>
</html>
意訳
 



taのスタイル
幅
高さ




入力用のテキストエリア

改行→カンマに変換するボタン
カンマ→改行に変換するボタン

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

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

taをフォーカスする

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

この機能がやること
変換前の文字の入れ物
変換後の文字の入れ物
クリックされたボタンのid
idがbreak_btなら
beforeは改行
afterはカンマ(と半角スペース)
idがreplace_btなら
beforeはカンマ(と全角半角スペースいくつでも)
afterは改行

/before/gのパターンを作って
ta.valueをafterで置換した値をresultの値に入れる