使用html-to-react解析HTML时遇无效标签错误，求解决方案

使用html-to-react解析HTML内容时，突然抛出错误：

Failed to execute 'createElement' on 'Document': The tag name provided ('href=a"https:') is not a valid name

移除HtmlToReactParser.parse相关代码后，项目恢复正常；尝试切换导入方式（从require改为import { Parser as HtmlToReactParser } from 'html-to-react'），错误依旧。已排查5小时，寻求可行解决办法。

1. 检查待解析HTML的合法性
   错误提示的'href=a"https:'是明显畸形的标签/属性格式，核心问题大概率是record.content里存在格式错误的HTML：

   • 直接打印record.content的原始字符串，检查是否有这些问题：属性值缺少引号或引号不匹配、标签未闭合、属性名与值写反（比如把<a href="xxx">写成<a href=a"xxx">）
   • 手动修复发现的畸形HTML片段后，重新执行解析逻辑验证

2. 添加HTML预处理清洗
   如果无法保证待解析HTML的规范性，在调用parse前先做清洗：

   • 用DOMParser自动修正格式：

     const cleanHtml = new DOMParser().parseFromString(record.content, 'text/html').body.innerHTML;
     const reactElement = HtmlToReactParser.parse(cleanHtml);
     

   • 或用正则修复常见的属性错误（比如补全属性值引号）：

     // 示例：给未加引号的href属性补全引号
     const fixedHtml = record.content.replace(/href=([^\s"']+)/g, 'href="$1"');
     const reactElement = HtmlToReactParser.parse(fixedHtml);
     

3. 校验库版本兼容性
   查看package.json中的html-to-react版本：

   • 若之前运行正常，尝试回退到旧版本
   • 或升级到最新稳定版，排查是否是版本更新导致的解析逻辑变化

4. 自定义解析规则过滤无效内容
   配置解析器选项，自定义处理逻辑跳过无效标签：

   const parseOptions = {
     transform: (node) => {
       // 过滤不符合规范的标签名
       if (node.type === 'tag' && !/^[a-z][a-z0-9-]*$/i.test(node.name)) {
         return null;
       }
       return node;
     }
   };
   const reactElement = HtmlToReactParser.parse(record.content, parseOptions);
   

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