如何将含大量\n与\r的HTML字符串转为HTML？已用dangerouslySetInnerHTML

一、先清理字符串里的无效内容 #

原始字符串里的\n、\r，还有转义后的HTML实体（比如<、>）会导致解析异常，先写个工具函数处理：

// 处理转义字符和冗余换行的工具函数
const sanitizeHtmlString = (htmlStr) => {
  // 把HTML实体转成真实标签
  let decoded = htmlStr.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"');
  // 删掉多余的回车和换行
  decoded = decoded.replace(/\r/g, '').replace(/\n+/g, ' ');
  // 移除字符串首尾的无效引号
  decoded = decoded.replace(/^"|"$/g, '');
  return decoded;
};

二、正确传入dangerouslySetInnerHTML #

处理后的字符串要放在__html属性里，示例代码如下：

// 假设这是你获取到的数据
const data = {
  title: "示例标题",
  description: '<p>Hello.<br></p><style>.button{width:100%;display:flex;border:1px solid #bf9116;padding:10px;justify-content:center;color:#bf9116;box-shadow:0px 1px 5px 1px #bf9116;}.column{padding-top:71px;}</style>'
};

function MyComponent() {
  const cleanedDesc = sanitizeHtmlString(data.description);
  return (
    <div>
      <h2>{data.title}</h2>
      {/* 用处理后的字符串渲染 */}
      <div dangerouslySetInnerHTML={{ __html: cleanedDesc }} />
    </div>
  );
}

三、避坑提醒 #

• 样式全局污染：直接插入<style>会影响全局样式，建议给样式类名加唯一前缀，或者用CSS Modules、styled-components做局部样式管理
• XSS风险：dangerouslySetInnerHTML本身有安全隐患，最好用dompurify先过滤危险代码再渲染：

import DOMPurify from 'dompurify';

// 先清理再过滤
const safeDesc = DOMPurify.sanitize(sanitizeHtmlString(data.description));

内容的提问来源于stack exchange，提问作者Deepak Pradhan