javascript - 如何将包含撇号的整个字符串发送到我的函数？

Question

function getNameAndPath(data) {
return "<div onclick='OpenFile(\"" + data.Path + "\")'> <b>" + data.Name+ "</b></div>"}

我尝试了这个，但是由于我的变量 data.Path 中包含撇号，它返回给我:

调用该函数来显示数据表中的数据

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

Answer 1

不返回字符串，而是返回一个元素，并调用addEventListener在元素上。这使您可以使用 data闭包中的参数，而不存在内联属性的转义问题(应尽可能避免，因为它们很难管理，而您遇到的情况就是原因之一 - 它们存在字符串转义问题和范围问题):

function getNameAndPath(data) {
  const div = document.createElement('div');
  div.innerHTML = `<b>${data.Name}</b>`;
  div.addEventListener('click', () => OpenFile(data.Path));
  return div;
}

然后将元素插入到 HTML 中，类似于

container.appendChild(getNameAndPath(data));

这将插入 data.Name不过，这通常是不可取的——如果数据不可信，它将允许执行任意 Javascript，并可能导致 HTML 中具有特殊含义的字符出现问题。如果这些对您来说可能是问题，请分配给 textContent <b>的元素代替:

function getNameAndPath(data) {
  const div = document.createElement('div');
  const b = div.appendChild(document.createElement('b'));
  b.textContent = data.Name;
  div.addEventListener('click', () => OpenFile(data.Path));
  return div;
}

如果你无法控制如何getNameAndPath正在被调用，那么在避免内联属性监听器的同时执行此操作的正确方法是向容器添加单击监听器，同时有一种将每个元素与其路径关联的方法。例如，在填充表格后

function getNameAndPath(data) {
  const div = document.createElement('div');
  const b = div.appendChild(document.createElement('b'));
  b.textContent = data.Name;
  div.dataset.Path = data.Path;
  return div;
}

然后添加一个点击监听器:

table.addEventListener('click', (e) => {
  const div = e.target.closest('[data-path]');
  if (div) {
    OpenFile(div.dataset.path);
  }
});