传递含双引号的字符串参数时出现引号语法错误，求解决方案

传递内部包含双引号的字符串作为参数时出现引号错误，错误截图如下：

原代码：

function renderHTML(courseRender) {
    const render = courseRender.map(function (course) {
        return (
            `
                <li class='course-item-${course.id}'>
                <b>${course.name}</b>
                <button onclick="handleDeleteCours(${course.id})" class='btn-del'>Delete</button>
                <button onclick="innitValueInForm('${course.name}', '${course.description}', '${course.id}')" class="btn-edit">Update</button> 
                <p>${course.description}</p>
                </li>
        
        `
    )
})
    ulElement.innerHTML = render.join('')
}

function innitValueInForm(nameValue, desValue, id){
    const btn_creat = document.querySelector('.btn-creat')
    btn_creat.className = 'btn-update'
    btn_creat.innerHTML = 'Update'

    document.querySelector('input[name="name"]').value = nameValue
    document.querySelector('input[name="description"]').value = desValue

    btn_creat.onclick = function(){
        const dataUpdate = {
            name: document.querySelector('input[name="name"]').value,
            description: document.querySelector('input[name="description"]').value
        }
    }
}

已尝试的修改：

<button onclick="innitValueInForm(\`${course.name}\`, \`${course.description}\`, '${course.id}')" class="btn-edit">Update</button>

<button onclick="innitValueInForm('${course.name.replace(/'/g, "\\'")}', '${course.description.replace(/'/g, "\\'")}', '${course.id}')" class="btn-edit">Update</button>

方案一：避免内联onclick，使用事件委托（推荐） #

内联事件处理函数容易引发引号冲突、XSS风险，且代码耦合性高。改用事件委托更安全可靠：

function renderHTML(courseRender) {
    const render = courseRender.map(course => `
        <li class='course-item-${course.id}' data-id="${course.id}">
            <b>${course.name}</b>
            <button class='btn-del'>Delete</button>
            <button class="btn-edit" data-name="${course.name}" data-description="${course.description}" data-id="${course.id}">Update</button> 
            <p>${course.description}</p>
        </li>
    `).join('');
    ulElement.innerHTML = render;
}

// 给父元素ul绑定事件委托
ulElement.addEventListener('click', function(e) {
    const target = e.target;
    // 处理删除按钮
    if(target.classList.contains('btn-del')) {
        const id = target.closest('.course-item').dataset.id;
        handleDeleteCours(id);
    }
    // 处理编辑按钮
    if(target.classList.contains('btn-edit')) {
        const { name, description, id } = target.dataset;
        innitValueInForm(name, description, id);
    }
});

方案二：正确转义双引号和单引号 #

如果一定要保留内联onclick，需要同时转义字符串中的单引号和双引号：

// 转义函数
function escapeAttrValue(str) {
    return str.replace(/'/g, "\\'").replace(/"/g, '\\"');
}

function renderHTML(courseRender) {
    const render = courseRender.map(function (course) {
        const escapedName = escapeAttrValue(course.name);
        const escapedDesc = escapeAttrValue(course.description);
        return (
            `
                <li class='course-item-${course.id}'>
                <b>${course.name}</b>
                <button onclick="handleDeleteCours(${course.id})" class='btn-del'>Delete</button>
                <button onclick="innitValueInForm('${escapedName}', '${escapedDesc}', '${course.id}')" class="btn-edit">Update</button> 
                <p>${course.description}</p>
                </li>
        
        `
    )
})
    ulElement.innerHTML = render.join('')
}

说明 #

• 方案一的事件委托不仅解决了引号冲突，还提升了代码可维护性，避免重复绑定事件，同时降低XSS风险。
• 方案二的转义需要覆盖所有可能的引号类型，否则仍会出现语法错误。

内容的提问来源于stack exchange，提问作者Nguyễn Ngọc Ngân Hà