React解析API返回HTML时a标签前后出现多余换行如何解决

这个现象基本和HTML解析工具无关，90%以上的情况是CSS默认样式冲突，或是解析时空白字符处理逻辑导致的，可按以下步骤排查解决：

1 优先排查CSS样式 #

• 打开浏览器开发者工具，选中生成的<a>标签，查看计算样式：
  • 若display属性为block/inline-block，会独占一行，手动重置为inline即可
  • 若margin-top/margin-bottom非0，直接重置为0
• 查看解析内容的父容器white-space属性，若为pre/pre-wrap/pre-line，会将HTML源码中的换行符渲染为真实换行，将属性改为normal即可

2 预处理HTML字符串（解决空白字符问题） #

如果CSS排查无问题，可在解析前对API返回的HTML字符串做预处理，清除多余换行和空白：

const rawHtml = '你的API返回的HTML字符串'
// 先清除转义换行符，再处理a标签前后的多余空白
const processedHtml = rawHtml.replace(/\\r\\n|\\n|\\r/g, '').replace(/\s+(<a[^>]+>)\s+/g, ' $1').replace(/\s+(<\/a>)\s+/g, '$1 ')

3 不同解析方案的针对性修复 #

3.1 使用dangerouslySetInnerHTML #

直接传入处理后的字符串即可：

<div className="html-content-wrapper" dangerouslySetInnerHTML={{__html: processedHtml}} />

给容器加专属样式避免全局样式污染：

.html-content-wrapper a {
  display: inline !important;
  margin: 0 !important;
}
.html-content-wrapper {
  white-space: normal !important;
}

3.2 使用html-react-parser/react-html-parser #

可自定义a标签的解析规则，强制覆盖样式：

import parse from 'html-react-parser';
import domToReact from 'html-react-parser/lib/dom-to-react';

const parseOptions = {
  replace: ({ name, attribs, children }) => {
    if (name === 'a') {
      return (
        <a 
          href={attribs.href} 
          rel="noopener noreferrer"
          style={{ display: 'inline', margin: 0 }}
        >
          {domToReact(children)}
        </a>
      )
    }
  }
};

// 渲染
<div className="html-content-wrapper">{parse(processedHtml, parseOptions)}</div>

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