字符串模板字面量内的HTML标签传递给JS方法报语法错误如何解决

问题根本原因 #

你遇到的报错是因为直接将包含特殊字符的person.bio字段拼接到内联onClick事件的字符串参数中，破坏了原有JS语法结构：

• bio字段内的双引号、单引号会提前闭合你写的参数包裹引号，导致语法断裂
• 你当前使用的正则仅替换了_*#"四个字符，完全无法覆盖换行、反斜杠、单引号等其他会触发语法错误的特殊字符
• bio中自带的HTML标签（比如锚点标签）的属性引号会直接和外层onClick的属性引号冲突，导致代码直接解析失败

最优解决方案：使用事件委托替代内联onclick #

完全不要拼接内联事件参数，把person相关数据存到DOM元素的自定义属性（dataset）中，全局绑定点击事件读取属性即可，从根源避免转义问题：

// 第一步：渲染卡片时只存数据到dataset，不写内联onclick
document.getElementById("cards").innerHTML = `
    ${allData.map(person => `
        <div class="card flex-col" 
             data-name="${person.name.replace(/"/g, '&quot;')}"
             data-title="${person.title.replace(/"/g, '&quot;')}"
             data-photo="${person.photo_url.replace(/"/g, '&quot;')}"
             data-bio="${person.bio.replace(/"/g, '&quot;')}"
        >
            <div class="card_top">
                <img class="prof_pic" src="${person.photo_url}" 
                     alt="${person.name.replace(/"/g, '&quot;')}"/>
            </div>
            <div class="card_bottom flex-col">
                <h3 class="prof_name">${person.name}</h3>
                <p class="prof_title">${person.title}</p>
                <button class="view_button">View Bio</button>
            </div>
        </div>
    `).join("")}
`;

// 第二步：给cards容器绑定事件委托，统一处理点击
document.getElementById('cards').addEventListener('click', e => {
    // 匹配点击的是card本身或者内部的view按钮
    const card = e.target.closest('.card');
    if (!card) return;
    // 直接从dataset读取所有参数，完全不需要额外转义处理
    const {name, title, photo, bio} = card.dataset;
    changeModalContent(name, title, photo, bio);
    modal.open();
});

备选方案：如果必须保留内联onclick #

需要给传递的所有字符串参数做完整的JS转义，避免特殊字符破坏语法：

// 定义通用转义函数
function escapeJS(str) {
    return str.replace(/\\/g, '\\\\')
              .replace(/'/g, "\\'")
              .replace(/"/g, '"')
              .replace(/\n/g, '\\n')
              .replace(/\r/g, '\\r');
}

// 拼接参数时所有字符串都先走转义函数
onClick="changeModalContent('${escapeJS(person.name)}', '${escapeJS(person.title)}', '${escapeJS(person.photo_url)}', '${escapeJS(person.bio)}'); modal.open();"

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