如何用更安全的方案替代JavaScript中的eval函数？

问题背景 #

原代码通过拼接字符串后用eval实现批量替换功能，存在安全风险：

const textarea = document.getElementsByTagName("textarea")[0];
const tooltip2 = document.querySelectorAll(".tooltip2");
const hiddenTooltip = document.querySelectorAll(".hiddenTooltip");

let replaced = 'textareaValue';
for (let i = 0; i < tooltip2.length; i++) {
    replaced += '.replace(/' + tooltip2[i].innerText + '/g,' + "'" + hiddenTooltip[i].innerText + "'" + ')'
}
replaced += ';';

textarea.value = eval( replaced );

期望实现的效果等价于硬编码链式调用replace：

let replaced = textareaValue.replace(/kga/g,'całkowite opracowanie ubytku, selektywne wytrawianie, UB, Gradia A3')
                           .replace(/ksc/g,'scaling nad i poddziąsłowy, fluoryzacja na łyżkach')
                           .replace(/ksn/g, 'scaling naddziąsłowy, fluoryzacja na łyżkach')
                           .replace(/ksp/g, 'scaling poddziąsłowy, fluoryzacja na łyżkach')
                           .replace(/kwg/g, 'całkowite opracowanie ubytku, wypełnienie glasjonomerowe');

安全替代方案 #

不需要使用eval或new Function，直接通过循环迭代调用replace即可，同时处理正则特殊字符避免匹配异常：

const textarea = document.getElementsByTagName("textarea")[0];
const tooltip2 = document.querySelectorAll(".tooltip2");
const hiddenTooltip = document.querySelectorAll(".hiddenTooltip");

// 获取文本框初始值
let replaced = textarea.value;

// 遍历每一组替换规则
for (let i = 0; i < tooltip2.length; i++) {
    // 转义正则特殊字符（如.、*、+等），避免匹配逻辑出错
    const escapedSearch = tooltip2[i].innerText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    // 创建全局匹配的正则表达式
    const regex = new RegExp(escapedSearch, 'g');
    // 获取替换文本
    const replacement = hiddenTooltip[i].innerText;
    
    // 执行替换并更新结果
    replaced = replaced.replace(regex, replacement);
}

// 将最终结果赋值回文本框
textarea.value = replaced;

方案说明 #

1. 无安全风险：全程仅执行字符串替换操作，不会解析或执行任何动态代码，彻底规避eval带来的代码注入隐患。
2. 效果等价：循环调用replace的逻辑和硬编码链式调用完全一致，实现相同的批量替换效果。
3. 鲁棒性更强：增加了正则特殊字符转义处理，即使匹配文本包含正则元字符，也能正确执行匹配替换。

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