サクラエディタのGrep結果をエクセル用に整形する

#サクラエディタ
##サクラエディタのGrep結果をエクセル用に整形する
自分用メモ



###1.grep.js
```
$(function(){
  $('#okBtn').click(function () {
    var str = $('#area1').val();
    var text1 = $('#text1').val();

    if(!str || !text1){
      alert("入力してね");
      return;
    }

    if ($('tr').is('*')) {
      $('tr').remove();
    }

    var strArray = str.split("\n");
    var result = "";
    var re = text1.replace(/[ !"#$%&'()*+,.\/:;<=>?@\[\\\]^`{|}~]/g, "\\$&");
    var cnt = 0;
    var exist = false;

    var arr, row, row, directory, num, encode, detail;

    re = new RegExp("^" + re + "(.*$)", "m");

    for (var i = 0; i <= strArray.length -1; i++) {

      if(strArray[i].match(re)){
        cnt++;
        if (cnt == 1) {
          $('thead').append('<tr id="cnt_th"><th>No.</th><th>対応要否</th><th>対応内容</th><th>対象ファイル</th><th>該当行番号</th><th>文字コード</th><th>該当行</th></tr>');
        }
        $('tbody').append('<tr id="cnt_' + cnt + '">');

        arr = strArray[i].match(re);

        row = arr[1].replace(/\\/g, "\/");

        $('#cnt_' + cnt).append('<td class="no" id="no_' + cnt + '">' + cnt + '</td>');
        $('#cnt_' + cnt).append('<td class="necessity" id="necessity_' + cnt + '"></td>');
        $('#cnt_' + cnt).append('<td class="matter" id="matter_' + cnt + '"></td>');

        dire = row.match(/(.*)(?=\(\d{1,5}\,\d{1,4})/m);
        directory = dire[0].replace(/^/g, "\.");

        $('#cnt_' + cnt).append('<td class="directory" id="directory_' + cnt + '">' + directory + '</td>');

        num = row.match(/(?<=\..*?\()(.*)/m);
        if(num == null) {
          num = row.match(/\(\d{1,5}\,\d{1,4}\)/m);
          num = num[0].replace(/\(|\)/g, "");
        }
        num = num[0].replace(/,.*/g, "");

        $('#cnt_' + cnt).append('<td class="num" id="num_' + cnt + '">' + num + '</td>');

        encode = row.replace(/^.+?\[/g, "");
        encode = encode.replace(/\]\:.*$/g, "");
        $('#cnt_' + cnt).append('<td class="encode" id="encode_' + cnt + '">' + encode + '</td>');

        detail = row.replace(/\t/g, " ");
        detail = detail.replace(/^.*?\]\:/g, "");
        $('#cnt_' + cnt).append('<td class="detail" id="detail_' + cnt + '"><code><math><![CDATA[' + detail + ']]></math></code></td>');

        $('tbody').append('</tr>');
      }
    }

  });
  
  $('#resetBtn').click(function () {
    $('tr').remove();
  });

});
```

###2. CSS
1.のsqlを実行しBEFORE.csvを出力後、awk外部ファイルを作成

```
#text1{
  width: 500px;
}

#area1{
  height: 500px;
  width: 1500px;
}

#okBtn{}

.btn{
  display: block;
  position: relative;
  width: 160px;
  padding: 0.8em;
  text-align: center;
  text-decoration: none;
  color: #1B1B1B;
  background: #fff;
  border:1px solid #1B1B1B;
  float: left;
  margin: 5px;
}
.btn:hover{
  background: #1B1B1B;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

table{
  width: 100%;
  border-collapse: collapse;
  border: solid 1px #000;
  font-family: 'ＭＳ Ｐゴシック';
  margin-bottom: 40px;
  font-size:14px;
}

table tr{}

table tr:last-child{
  border-bottom: none;
}

table th{
  border: solid 1px #000;
  padding: 10px 0 10px 0;
  text-align: left;
}

table td{
  text-align: left;
  border: solid 1px #000;
  padding: 10px 0;
}
table td.no{
  text-align: right;
}
table td.directory{
  width: 30%;
}
table td.num{
  width: 5%;
  text-align: center;
}
table td.encode{
  width: 5%;
  text-align: center;
}
table td.detail{
  width: 60%;
}

```

###3. HTML

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Grep整頓機</title>
  <link rel="shortcut icon" href="img/logo.png">
  <link rel="stylesheet" href="css/grep.css">
  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="js/gpre.js"></script>
</head>
 
<body>
  <div class="contents">
    <h1>Grep整頓機</h1>
    <p>ディレクトリを入れてください</p>
    <input id="text1" type="text">
    <p>サクラエディタのGrep結果を貼り付けてください</p>
    <textarea id="area1"></textarea>
    <div class="contents_btn">
      <button class="btn" id="okBtn">OK</button>
      <button class="btn" id="resetBtn">DEL</button>
    </div>
    <table>
      <thead></thead>
      <tbody></tbody>
    </table>
  <div>
</body>
</html>
```

###備考