如何在DataTables.js的title属性中正确插入特殊字符文本？

嘿，我刚好碰到过类似的坑，咱们一步步把它搞定～

首先得搞明白为啥直接拼接或者用JSON.stringify会失效：你的文本里有大量特殊字符（引号、反斜杠、各类符号）还有换行，直接拼HTML字符串会破坏属性的语法结构；而JSON.stringify的转义规则和HTML属性的转义规则不匹配，比如它转的\n在HTML属性里不会被识别成换行，还可能引入多余的双引号搞乱整个结构。

下面给你两个靠谱的解决方案，优先推荐第二个，安全又省心：

方案1：手动编写HTML属性转义函数 #

我们需要把HTML属性里的特殊字符转成对应的实体，同时把换行符转成能在title里生效的
（HTML换行实体）。写个简单的转义函数：

function escapeTitleText(text) {
  // 处理所有会破坏HTML属性的特殊字符
  return text
    .replace(/&/g, '&')       // 转义&符号
    .replace(/"/g, '"')      // 转义双引号（因为title用双引号包裹）
    .replace(/'/g, ''')       // 转义单引号
    .replace(/</g, '&lt;')        // 转义小于号
    .replace(/>/g, '&gt;')        // 转义大于号
    .replace(/\n/g, '&#10;')      // 转义换行符，让title hover时显示换行
    .replace(/\\/g, '&#92;');     // 转义反斜杠
}

然后在DataTables的render函数里这么用：

// 假设text是你的那串复杂文本
return '<span title="' + escapeTitleText(text) + '"></span>';

方案2：用DOM API创建元素（推荐，更安全） #

手动转义容易漏字符，用浏览器原生的DOM API来创建元素，它会自动帮你处理所有属性的转义，完全不用操心特殊字符的问题，还能避免XSS风险：

function getSpanWithTitle(text) {
  const span = document.createElement('span');
  // 直接把文本赋值给title属性，浏览器会自动转义所有特殊字符
  span.title = text;
  // 如果单元格需要显示内容，比如显示"查看详情"，可以加这句：
  // span.textContent = '查看详情';
  // 把元素转成HTML字符串返回给DataTables
  return span.outerHTML;
}

然后在DataTables里调用这个函数：

render: function(data, type, row) {
  // 这里的data就是你的那串特殊文本
  return getSpanWithTitle(data);
}

这个方法的好处是，不管你的文本里有什么妖魔鬼怪（引号、换行、特殊符号），浏览器都会自动处理成符合HTML规范的属性值，绝对不会失效。

为啥JSON.stringify不行？ #

简单说，JSON.stringify是用来生成JSON格式的字符串，它的转义规则是给JSON用的，不是给HTML属性用的。比如它会把双引号转成\"，但当你把这个结果拼到title="..."里时，就会变成title="..."\"..."，直接破坏了HTML的语法结构；而且JSON里的\n在HTML属性里不会被识别成换行，只会显示成普通的字符。

内容的提问来源于stack exchange，提问作者Мария