提交有序列表HTML后网页渲染异常，接口返回内容与请求一致

问题核心：接口返回的aboutus字段是经过HTML实体转义的字符串（包含<、>、 这类转义字符），前端直接输出会把它们当作纯文本，而非解析为HTML元素。

以下是不同前端场景的解决方法：

原生JavaScript场景 #

直接使用innerHTML属性将转义字符串插入DOM，浏览器会自动解析转义字符并渲染成对应HTML：

const aboutUsContent = "<ol>\n<li>Hi</li>\n<li>This </li>\n<li>is </li>\n<li>about </li>\n<li>us</li>\n</ol>";
document.getElementById('about-us-container').innerHTML = aboutUsContent;

React场景 #

使用dangerouslySetInnerHTML属性（注意：确保内容可信，避免XSS风险）：

const AboutUs = ({ aboutus }) => {
  return <div dangerouslySetInnerHTML={{ __html: aboutus }} />;
};

Vue场景 #

使用v-html指令：

<template>
  <div v-html="aboutus"></div>
</template>

<script>
export default {
  props: ['aboutus']
};
</script>

注意事项 #

• 确保接口返回的HTML内容是可信的（无恶意脚本），否则直接渲染HTML可能导致XSS攻击。如果内容来自用户输入，建议先做安全过滤。

内容的提问来源于stack exchange，提问作者Chandan Nick