JavaScript中含span的HTML文本字符串无法解析渲染求助

直接将带HTML标签的文本作为普通内容插入span时，浏览器或前端框架会自动转义HTML特殊字符（比如<变成<），导致标签无法解析。以下是不同场景下的解决方法：

原生JavaScript #

不要用textContent或直接插值，改用innerHTML属性赋值，它会解析HTML标签：

const textToRender = 'some text <br/> some text <br/> some text <ol><li>text</li></ol>';
const targetSpan = document.querySelector('span');
targetSpan.innerHTML = textToRender;

⚠️ 注意：如果文本来自用户输入或不可信来源，直接用innerHTML会有XSS攻击风险，需要先对危险标签/属性进行过滤（比如移除<script>、onclick等）。

React框架 #

React默认转义插值内容，需使用dangerouslySetInnerHTML属性（命名是为了提醒风险）：

function TextRenderer() {
  const textToRender = 'some text <br/> some text <br/> some text <ol><li>text</li></ol>';
  return <span dangerouslySetInnerHTML={{ __html: textToRender }} />;
}

同样要注意XSS风险，不可信内容必须先做安全处理。

Vue框架 #

使用v-html指令来解析HTML内容：

<template>
  <span v-html="textToRender"></span>
</template>

<script>
export default {
  data() {
    return {
      textToRender: 'some text <br/> some text <br/> some text <ol><li>text</li></ol>'
    };
  }
};
</script>

和前两种情况一样，不可信输入要先过滤危险内容。

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