将文本中@用户名替换为Twitter链接时HTML转义异常问题求助

问题根源分析 #

你遇到的核心问题是使用了text属性赋值——这个属性会把所有内容当作纯文本处理，浏览器会自动把HTML标签转义成实体字符（比如<变成<，"变成"），所以原本的链接代码就变成了一堆看不懂的转义字符。另外原代码里还有个小错误：替换后的文本写了%$1，应该是@$1才能保留原有的@格式。

修正后的代码 #

function replaceAts(){ 
  for (var i = 0; i < list.length; i++){
    // 先用textContent获取纯文本，避免干扰原有HTML（如果有的话）
    const originalText = list[i].textContent;
    // 替换后用innerHTML赋值，让浏览器解析HTML标签
    list[i].innerHTML = originalText.replace(/@(\w+)/g, '<a href="https://twitter.com/$1" target="_blank">@$1</a>');
  }
}

代码逐行解释 #

• list[i].textContent：获取元素的纯文本内容，这样可以避免读取到元素中已有的HTML标签，保证替换的是原始文本里的@用户名。
• list[i].innerHTML：把处理后的HTML字符串赋值给元素，浏览器会直接解析这段HTML，渲染成可点击的Twitter链接，而不是转义成文本。
• @$1：把原代码里的%$1改成@$1，这样显示的内容和原文本一致，还是@用户名的格式。

额外注意事项 #

• 如果你的list元素原本就包含HTML内容（比如加粗、换行），用textContent会丢失这些格式，这时候可以改用list[i].innerHTML先获取内容，处理后再赋值，但要注意如果内容是用户输入的，可能存在XSS安全风险，需要做额外的过滤。
• 确保list是正确获取到的DOM元素集合，比如通过document.querySelectorAll('.your-text-element-class')来获取目标元素。

内容的提问来源于stack exchange，提问作者C. Fior