获取元素HTML代码值时出现异常输出的原因与解决方法

嘿，这个问题其实是浏览器对HTML的自动解析在搞鬼！咱们一步步来拆解：

为什么会出现异常结果？ #

你的span内容是List<Tuple<string, string>>，这里面的<和>在HTML里是标签的起止符号，浏览器会自动把它们当成HTML标签来解析——比如它会把<Tuple<string认作一个名为Tuple的标签，还把string当成这个标签的属性，后面的, string>就被当成属性值的一部分，最后整个结构被彻底打乱。这就是为什么html()拿到的是被错误转义后的乱码，text()也因为浏览器的错误解析丢失了部分内容。

解决办法 #

1. 提前转义HTML实体（推荐方案） #

在把这段文本放到span里之前，先把<替换成<，>替换成>，这样浏览器就不会把它们当成标签解析了。修改后的HTML应该是这样：

<span id="lbl">List&lt;Tuple&lt;string, string&gt;&gt;</span>

这时候再用jQuery获取内容就正常了：

// 直接用text()就能拿到正确文本
console.log($('#lbl').text()); // 输出：List<Tuple<string, string>>

// 如果需要用html()获取转义后的内容再还原，也可以这么做
console.log($('<div>').html($('#lbl').html()).text()); // 同样得到正确结果

2. 使用原生JS的textContent属性 #

如果没办法修改原始HTML，直接用原生JS的textContent属性获取文本，它会绕过浏览器的HTML解析，直接拿到元素里的原始文本内容：

console.log(document.getElementById('lbl').textContent); // 输出正确的List<Tuple<string, string>>

3. 手动修复已有的错误解析（应急方案，不推荐长期使用） #

如果已经没办法修改HTML了，也可以手动处理html()返回的乱码，比如替换掉错误的实体：

const messedUpHtml = $('#lbl').html();
const fixedText = messedUpHtml.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/string=""/g, 'string');
console.log(fixedText); // 能还原出正确内容，但这种方法很脆弱，仅适合临时应急

内容的提问来源于stack exchange，提问作者Koby Douek