JavaScript中如何转义<tr>标签内的'<'字符以正常显示内容？

嘿，这个问题我太熟了！你遇到的问题本质是HTML对特殊字符的解析规则——<Value TBD>里的<和>会被浏览器当成HTML标签的起始/结束符号，而不是普通文本内容来渲染。你当前用的.html()方法会直接把内容当作HTML代码解析，自然就出问题了，下面给你两个靠谱的解决方案：

方案1：改用.text()方法（优先推荐） #

.text()方法会自动帮你转义所有HTML特殊字符，把内容纯文本化插入到元素中，完全不需要手动处理。修改你的代码如下：

if($("th[data-field='rating']").get(0) !== undefined) { 
  debugger; 
  row.append($("<td />").css("font-size", "12px").text(segmentations)); 
}

这个方法不仅能完美显示<Value TBD>，还能避免潜在的XSS风险（如果segmentations是用户输入内容的话），简洁又安全。

方案2：手动转义HTML特殊字符（适合需要保留部分HTML的场景） #

如果你因为某些原因必须使用.html()方法，可以写一个简单的转义函数，把<替换成<，>替换成>（这两个是HTML实体，浏览器会解析成对应的符号）：

// 定义转义函数
function escapeHtml(str) {
  return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

// 在代码中使用转义后的内容
if($("th[data-field='rating']").get(0) !== undefined) { 
  debugger; 
  row.append($("<td />").css("font-size", "12px").html(escapeHtml(segmentations))); 
}

这样转义后的内容传给.html()，浏览器就会把它当成普通文本渲染了。

内容的提问来源于stack exchange，提问作者Saikat Neogy