HTML的<a>标签插入链接后显示源码而非可点击链接如何解决

你描述的<a>标签直接展示源码的核心原因是：字段中的HTML标签被做了HTML实体转义，<、>、"这些标签关键字符都被转换成了<、>、"这类实体编码，浏览器会将这部分内容识别为普通文本，不会解析成可点击的链接标签。

根据你的技术场景选择对应处理方式即可：

• 前端框架默认转义场景
  目前主流前端框架（React、Vue、Angular等）为了防范XSS攻击，默认都会对插入的文本内容做HTML转义，若你确认这段HTML内容是安全的，可以使用框架提供的原生HTML渲染能力：
  • Vue 场景：使用v-html指令绑定内容，示例：<div v-html="item.description"></div>
  • React 场景：使用dangerouslySetInnerHTML属性，示例：<div dangerouslySetInnerHTML={{__html: item.description}} />
  • 原生JS 场景：直接给DOM节点的innerHTML属性赋值，示例：document.querySelector('.desc').innerHTML = item.description
• 内容返回时已被转义场景
  若后端返回的内容本身就已经是转义后的实体编码，可以先通过代码把实体编码转回普通HTML字符串后再渲染，转换函数示例：

  function decodeHtml (encodedStr) {
    const tempEle = document.createElement('textarea')
    tempEle.innerHTML = encodedStr
    return tempEle.value
  }
  // 调用示例
  const rawDescription = decodeHtml(yourData.description)
  // 再把rawDescription用上述原生HTML方式渲染即可
  

• 长期优化方案
  若你可以调整后端返回的字段结构，建议不要把HTML标签直接存储在描述字段中，把链接地址、链接文本拆分为独立字段返回，前端自行拼接<a>标签渲染，既能规避转义问题，也能降低XSS安全风险。

直接渲染原生HTML存在XSS注入风险，若该描述字段的内容允许普通用户提交编辑，渲染前必须先做XSS内容过滤，避免恶意脚本被注入执行。

内容的提问来源于stack exchange，提问作者Paras Prajapati