JavaScript : テキストエリアに載せた文字列を置換する

　仕事に使うので作りました。
　テキストエリアに載せた文字列を変数replaceCodeの規則で置換します。より複雑な置換はJSいじってください。

<!--文字列を置換する-->
<!--▼▼▼▼▼▼主要コード▼▼▼▼▼▼-->
<script>/*変換ｺｰﾄﾞ*/
var replaceCode=[
   ['置換前','置換後']
  ,[' ','&nbsp;']
  //,['','']
  
];
</script>
<!--▲▲▲▲▲▲主要コード▲▲▲▲▲▲-->

<!--▼▼▼textArea用-->
<style>textarea {resize: both; min-height: 100px; width: 100%;}</style><script>window.addEventListener("DOMContentLoaded", () => {const textareaEls = document.querySelectorAll("textarea");textareaEls.forEach((textareaEl) => {textareaEl.setAttribute("style", `height: ${textareaEl.scrollHeight}px;`);textareaEl.addEventListener("input", setTextareaHeight);});function setTextareaHeight() {this.style.height = "auto";this.style.height = `${this.scrollHeight}px`;}});</script>
<!--▲▲▲textArea用-->

<!--▼▼▼▼▼▼HTML▼▼▼▼▼▼-->
<b>文字列を置換する</b>
<style>
  table {table-layout: fixed;
         width: 100%;
        }
  td    {width: 50%;
         overflow: hidden;
        }
  textarea {width: 100%; height: 100vh;
            resize: none;
            white-space: pre-wrap;
            overflow-wrap: break-word;
           }
</style>
<table><tr><td>元</td><td>先</td></tr>
  <tr>
    <!--左カラム-->
    <td valign="top" style="table-layout: fixed;">
      <form name="leftForm"><textarea id="leftTxt"></textarea></form>
    </td>
    <!--右カラム-->
    <td valign="top" style="table-layout: fixed;">
      <div name="rightForm"><span id="rightTxt"></span></div>
    </td>
  </tr>
</table>
<!--▲▲▲▲▲▲HTML▲▲▲▲▲▲-->

<!--▼▼▼▼▼▼処理▼▼▼▼▼▼-->
<script>
  console.log('▼▼▼▼▼▼'+new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds());  
  
  function dom(){
    /*初期値*/
    var leftTxtHold =document.getElementById("leftTxt").value;
    leftTxtHold=leftTxtHold.split('\n');
    console.log(leftTxtHold);
    
    // 結果のHTMLを格納
    var resultHtml = '';
    
    // 各行に対して置換ルールを適用
    for (var i = 0; i < leftTxtHold.length; i++) {
      var line = leftTxtHold[i];
      var replaced = false;
      
      replaceCode.forEach(function(codePair) {
        var before = new RegExp(codePair[0], 'g'); // 置換前の文字列を正規表現に変換
        var after = codePair[1]; // 置換後の文字列
        
        if (line.match(before)) {
          
          //行を置換する  
          switch(codePair[0]){
            //case "": break; 
            default: 
              line = line.replace(before, after); 
              break;
          }
          
          //行を赤くするか判定
          switch(codePair[0]){
            case ' ': break;
            default: replaced = true; break;
          }
        }
      });
      
      // 置換が行われた場合、その行を赤色でハイライト
      if (replaced) {resultHtml += '<span style="color: red;">' + line + '</span>';} 
      else          {resultHtml += line;}
      resultHtml += '<br>';
    }
    // 結果を出力テキストエリアにセット
    rightTxt.innerHTML = "<tt>"+resultHtml+"</tt>";
  }
  document.getElementById("leftTxt").addEventListener('input', dom);
  
  console.log('▲▲▲▲▲▲'+new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds());  
</script>
<!--▲▲▲▲▲▲処理▲▲▲▲▲▲-->