テキストのインデントを波打つように整形する

テキストのインデントを波打つように整形する

教えてgoo に投稿するために、わざわざ書いてみた
あれ?空白行の処理が変?あとで直そう!

<!DOCTYPE html>
<meta charset="utf-8">
 <title>インデントを波の様にする</title>
 <style>
  body {
   background-image: linear-gradient(-90deg, #495B4B, #FFFFFF);
    }
     
      h1, h2, h3, h4, h5, h6, th {
       font-weight: normal;
        }
         
         h1 { font-size: x-large; }
          
          form {
          counter-reset : no 0;
          }
          
         fieldset {
         box-shadow: 3px 3px 8px rgba(0,0,0,.6);
        border: 2px silver solid;
       border-radius: 8px;
      margin-bottom: 1em;
     }
    
   form legend, table {
  color: #343;
 text-shadow: -1px -1px 0px white, 1px 1px 2px black;
 }

form legend:before {
counter-increment : no 1;
 content           : "[" counter(no) "]";
 padding-right     : 1ex;
  }
   
    textarea {
     box-sizing        : border-box;
      width : 100%;
       border-style: none;
        background: transparent;
         color: #444;
         font-size: x-small;
          }
          
          input:checked+span {
          border-bottom: 2px #454 solid;
          }
         
         img {
        border: 2px red solid;
       height: 100px; width: 100px;
      }
     
    
   </style>
  
 <body>
 <h1>テキストのインデントを波の様に整形する</h1>
<form>
<fieldset>
<legend>Texts</legend>
 <textarea cols="90" rows="12" placeholder="ここにテキストをドロップ or ペーストします"></textarea>
 </fieldset>
  
   <fieldset>
    <legend>Setting</legend>
     <table>
      <tr>
       <th>形状
        <td>
         <label>
         <input type="radio" name="type" value="cos" checked>
          <span>Cos波</span>
          </label>
          
          <tr>
          <th>インデント
         <td>
         <input name="indent" type="number" min="0" max="50" value="0">(単位:半角文字)
        
       <tr>
      <th>振幅
     <td>
    <input name="sinpuku" type="number" min="0" max="50" value="16">(単位:半角文字)
   
  <tr>
 <th>周期
 <td>
<input name="shuuki" type="number" min="0" max="50" value="32">(単位:行)

<tr>
 <th>コメント
 <td>
  <label>
   <input type="checkbox" name="fm1" value="1">
    <span>/*以降から*/までを取り除く</span>
     </label><br>
      
       <label>
        <input type="checkbox" name="fm2" value="1">
         <span>//以降の文字を取り除く</span>
         </label><br>
          
          <label>
          <input type="checkbox" name="fm3" value="1">
          <span>#以降の文字を取り除く</span>
          </label>
         
         <tr>
        <th>空白文字
       <td>
      <label>
     <input type="checkbox" name="fm4" value="1" checked>
    <span>前後の空白文字(全角も含む)削除する</span>
   </label><br>
  
 <tr>
 <th>空白行
<td>
<label>
<input type="checkbox" name="fm0" value="1">
 <span>削除する</span>
 </label><br>
  
   <tr>
    <th>インデント文字
     <td>
      <label>
       <input type="checkbox" name="ch1" value="1">
        <span>半角空白文字(2個)を全角空白にする</span>
         </label>
         
          </table>
          <input type="button" value="整形する" onclick="go()">
          </fieldset>
          
          <fieldset>
         <legend>Result</legend>
         <textarea cols="90" rows="36" placeholder="ここに結果が表示されます"
        onfocus=""></textarea>
       </fieldset>
      </form>
     
    <script>
   
  function go () {
 let
 doc = document,
tarea = doc.querySelectorAll ('form textarea'),
text= tarea[0].value,
indent = parseInt (doc.querySelector ('input[name="indent"]').value, 10),
 sinpuku = parseInt (doc.querySelector ('input[name="sinpuku"]').value, 10),
 shuuki = parseInt (doc.querySelector ('input[name="shuuki"]').value, 10),
  e;
   
    if (e = doc.querySelector ('input[name="fm1"]:checked'))
     text = text.replace (/\/\*([^*]|\*[^\/])*\*\//gm, '');
      if (e = doc.querySelector ('input[name="fm2"]:checked'))
       text = text.replace (/\/\/.*/gm, '');
        if (e = doc.querySelector ('input[name="fm3"]:checked'))
         text = text.replace (/#.*/gm, '');
         if (e = doc.querySelector ('input[name="fm4"]:checked'))
          text = text.replace (/(^( | )*|( | )*$)/gm, '');
          
          if (e = doc.querySelector ('input[name="fm0"]:checked'))
          text = text.replace (/^( | )*/gm, '').replace (/^(\r\n|\r|\n)/gm, '');
          
         
         
        let
       line = text.split (/\n\r|\n|\r/g),
      i = 0,
     I = line.length,
    sp = ' '.repeat (indent),
   pi2 = Math.PI * 2,
  offset = 0,
 spall;
 
for (;i < I; i++) {
switch (doc.querySelector ('input[name="type"]:checked').value) {
case 'cos' :
 offset = Math.floor((1 - Math.cos (pi2 / shuuki * i)) * sinpuku * .5 + .5);
 break;
  default :
   offset = 0;
    break;
     }
      spall = sp + (' '.repeat (offset));
       if (e = doc.querySelector ('input[name="ch1"]:checked'))
        spall = spall.replace (/  /g,' ');
         line[i] = spall + line[i];
         }
          
          text = line.join ('\n');
          
          tarea[1].value = text;
          }
         </script>