如何通过正则表达式或其他方式更新String.raw代码块中的值？

你的核心需求是通过按钮交互更新ENV_NAME_VARIABLE的值，并同步到textarea中。首先修正原代码里的语法错误："name": "${ENV_NAME_VARIABLE}""多了一个多余的双引号，应改为"name": "${ENV_NAME_VARIABLE}"。

下面提供两种可行的解决方案：

方案一：维护模板重新生成（推荐） #

这种方式不需要解析textarea的现有内容，而是保留原始字符串模板，每次更新变量后重新生成完整的ENV内容再替换到textarea中，逻辑清晰且不易出错。

完整代码示例：

<script>
    let ENV_NAME_VARIABLE = 'TESTING NAME';

    // 抽离模板函数，方便重复生成内容
    function generateEnvContent() {
        return String.raw`
        {
            "id": "15bbb91c-b9d9-4238-8eb5-01c991d613ba",
            "name": "${ENV_NAME_VARIABLE}"
        }
        `;
    }

    // 初始化渲染textarea
    document.write(`
    <textarea id="ENV" style="width: 80%; height: 100px">${generateEnvContent()}</textarea>
    `);

    function updateName() { 
        // 更新变量值
        ENV_NAME_VARIABLE = 'ABC';
        // 重新生成内容并替换到textarea
        document.getElementById('ENV').value = generateEnvContent();
    }
</script>

<p>
<button onclick="updateName();">Change value of name to ABC</button>
</p>

说明： #

• 将生成ENV内容的逻辑封装成函数，每次更新时直接调用，确保内容与变量值完全同步。
• 避免了从textarea逆向解析变量值的复杂操作，降低格式变化导致的出错概率。

方案二：解析textarea内容替换（不推荐） #

如果必须从textarea现有内容中提取当前name值再替换，可以用正则表达式匹配目标内容。但这种方式依赖内容格式的稳定性，若格式（如空格、引号位置）变化则会失效。

代码示例：

<script>
    let ENV_NAME_VARIABLE = 'TESTING NAME';

    var ENV = String.raw`
    {
        "id": "15bbb91c-b9d9-4238-8eb5-01c991d613ba",
        "name": "${ENV_NAME_VARIABLE}"
    }
    `;

    document.write(`
    <textarea id="ENV" style="width: 80%; height: 100px">${ENV}</textarea>
    `);

    function updateName() { 
        const textarea = document.getElementById('ENV');
        // 用正则匹配name字段的现有值并替换
        const updatedContent = textarea.value.replace(/"name": "(.*?)"/, '"name": "ABC"');
        // 更新textarea内容
        textarea.value = updatedContent;
        // 同步更新变量（可选，确保后续使用时值一致）
        ENV_NAME_VARIABLE = 'ABC';
    }
</script>

<p>
<button onclick="updateName();">Change value of name to ABC</button>
</p>

说明： #

• 正则表达式/"name": "(.*?)"/用于匹配"name": "xxx"格式的内容，(.*?)是非贪婪匹配，确保只捕获当前name的取值。
• 替换后同步更新ENV_NAME_VARIABLE，避免后续使用变量时出现值不一致的问题。

内容的提问来源于stack exchange，提问作者Khom Nazid