如何将含单引号的完整字符串传入自定义JavaScript函数？

这个问题我之前也踩过坑！直接拼接HTML字符串的时候，一旦data.Path里带单引号，就会把onclick的引号结构直接搞崩，浏览器解析时直接抛出语法错误对吧？别慌，给你几个靠谱的解决思路：

方法一：用DOM元素创建代替字符串拼接（最推荐） #

Datatable的render函数支持直接返回DOM元素，完全不用手动处理引号转义，代码更安全也更易维护：

function getNameAndPath(data) {
  const containerDiv = document.createElement('div');
  const nameBold = document.createElement('b');
  
  nameBold.textContent = data.Name;
  containerDiv.appendChild(nameBold);
  
  // 直接绑定点击事件，变量直接传递，完全不用拼字符串！
  containerDiv.addEventListener('click', () => {
    OpenFile(data.Path);
  });
  
  return containerDiv;
}

你的Datatable配置可以保持不变：

{ 
  "data": getNameAndPath, 
  "name": "Nom", 
  "width": "auto"
}

这种方式不管data.Path里有单引号、双引号还是其他特殊字符，都不会出问题——因为我们是直接把变量传给函数，不是把它转成字符串塞进HTML里，从根源上避免了引号冲突。

方法二：转义字符串中的特殊引号 #

如果一定要用字符串拼接的方式，那得把data.Path里的单引号转义成JavaScript能识别的转义序列：

function getNameAndPath(data) {
  // 全局替换所有单引号为转义后的\'
  const escapedPath = data.Path.replace(/'/g, "\\'");
  return `<div onclick='OpenFile("${escapedPath}")'> <b>${data.Name}</b></div>`;
}

不过这种方式要注意，如果data.Path里还有双引号、反斜杠这类特殊字符，可能还需要额外处理，不如第一种方法省心。

方法三：用rowCallback拆分渲染与事件绑定 #

如果你想把渲染和事件绑定的逻辑分开，也可以用Datatable的rowCallback来实现：

$('#your-table-id').DataTable({
  columns: [
    { 
      "data": "Name", 
      "name": "Nom", 
      "width": "auto",
      // 先渲染基础的HTML结构
      "render": (name) => `<div><b>${name}</b></div>`
    }
  ],
  rowCallback: (row, rowData) => {
    // 给当前行的div绑定点击事件
    $(row).find('div').on('click', () => {
      OpenFile(rowData.Path);
    });
  }
});

这种方式把UI渲染和事件逻辑拆分，代码结构更清晰，同样不用担心引号冲突的问题。

总结一下，方法一的DOM元素创建是最稳妥的方案，还能规避字符串拼接带来的XSS风险，建议优先使用。

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