基于多select控件实现textarea内容替换后持久生效的问题

我提供了多个select选项，希望根据选择修改textarea中的部分内容。目前每个select单独触发修改时可正常生效，但切换其他select后，之前的修改会恢复为原始值。如何实现切换select时替换指定字符串，且修改能持久保留？

原代码如下：

<script type="text/javascript">
    var textcode = document.getElementById("code").innerHTML; 
    var bckcolor = document.querySelector('#bckcolor');
    var txtinner = document.querySelector('#txtinner');
    var submitbtn = document.querySelector('#submitbtn');
    bckcolor.addEventListener('change', e => {
        document.getElementById("code").innerHTML = textcode.replace("backcolor = \"#242323\"", "backcolor = \"" + bckcolor.value + "\"");
    })
    txtinner.addEventListener('change', e => {
        document.getElementById("code").innerHTML = textcode.replace("textinner = \"#c6c6c6\"", "textinner = \"" + txtinner.value + "\"");
    })
    submitbtn.addEventListener('change', e => {
        document.getElementById("code").innerHTML = textcode.replace("subbtn = \"linear-gradient(225deg, #ee69ff 0%, #955af9 100%)\"", "subbtn = \"" + submitbtn.value + "\"");
    })
</script>


<select name="bckcolor" id="bckcolor">
  <option value="#242323">#242323 (default)</option>
  <option value="blue">blue</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
</select>

<br/>

<select name="txtinner" id="txtinner">
  <option value="#c6c6c6">#c6c6c6 (default)</option>
  <option value="black">black</option>
  <option value="white">white</option>
  <option value="blue">blue</option>
</select>

<br/>

<select name="submitbtn" id="submitbtn">
  <option value="linear-gradient(225deg, #ee69ff 0%, #955af9 100%)">linear-gradient(225deg, #ee69ff 0%, #955af9 100%) (default)</option>
  <option value="black">black</option>
  <option value="white">white</option>
  <option value="blue">blue</option>
</select>

<textarea id="code" style="width:100%;height:300px;padding:10px;margin-bottom:10px;" disabled>
<script type="text/javascript">
var backcolor = "#242323";
var textinner = "#c6c6c6";
var subbtn = "linear-gradient(225deg, #ee69ff 0%, #955af9 100%)";
</script>
</textarea>

1. textcode变量仅保存了textarea的初始原始内容，每次修改都基于这个固定值替换，导致之前的修改被覆盖
2. 替换逻辑使用固定字符串匹配，比如"backcolor = \"#242323\""，一旦该值被修改，后续替换会因匹配不到目标内容失效

1. 每次修改时，基于textarea的实时内容进行替换，而非初始值
2. 使用正则表达式匹配变量定义行，实现精准替换，不受当前值影响

修改后的代码：

<script type="text/javascript">
    const codeTextarea = document.getElementById("code");
    const bckcolorSelect = document.querySelector('#bckcolor');
    const txtinnerSelect = document.querySelector('#txtinner');
    const submitbtnSelect = document.querySelector('#submitbtn');

    // 通用替换函数
    function updateVariable(varName, newValue) {
        const currentContent = codeTextarea.value;
        // 正则匹配变量行：var xxx = "任意内容";
        const regex = new RegExp(`var ${varName} = ".*?";`, 'g');
        codeTextarea.value = currentContent.replace(regex, `var ${varName} = "${newValue}";`);
    }

    bckcolorSelect.addEventListener('change', () => {
        updateVariable('backcolor', bckcolorSelect.value);
    });

    txtinnerSelect.addEventListener('change', () => {
        updateVariable('textinner', txtinnerSelect.value);
    });

    submitbtnSelect.addEventListener('change', () => {
        updateVariable('subbtn', submitbtnSelect.value);
    });
</script>


<select name="bckcolor" id="bckcolor">
  <option value="#242323">#242323 (default)</option>
  <option value="blue">blue</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
</select>

<br/>

<select name="txtinner" id="txtinner">
  <option value="#c6c6c6">#c6c6c6 (default)</option>
  <option value="black">black</option>
  <option value="white">white</option>
  <option value="blue">blue</option>
</select>

<br/>

<select name="submitbtn" id="submitbtn">
  <option value="linear-gradient(225deg, #ee69ff 0%, #955af9 100%)">linear-gradient(225deg, #ee69ff 0%, #955af9 100%) (default)</option>
  <option value="black">black</option>
  <option value="white">white</option>
  <option value="blue">blue</option>
</select>

<textarea id="code" style="width:100%;height:300px;padding:10px;margin-bottom:10px;" disabled>
<script type="text/javascript">
var backcolor = "#242323";
var textinner = "#c6c6c6";
var subbtn = "linear-gradient(225deg, #ee69ff 0%, #955af9 100%)";
</script>
</textarea>

• 使用codeTextarea.value获取textarea实时内容（textarea用value比innerHTML更准确）
• 封装updateVariable函数，统一替换逻辑，减少重复代码
• 正则表达式可精准匹配任意变量定义行，无论当前值是什么，都能有效替换

内容的提问来源于stack exchange，提问作者Jean-Pierre Bazinet