テキストのインデントを波打つように整形する
テキストのインデントを波打つように整形する
教えて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>