如何在HTML字符串的多个<li>元素间保留<mark>标签？

哈哈，我太懂这种糟心的情况了！想给跨多个列表项的文本加高亮，结果<mark>标签要么被解析器悄咪咪改了结构，要么直接失效，是不是超头疼？

其实核心问题出在HTML的嵌套规则上：<mark>是行内元素，而<li>是块级元素，行内元素直接包裹或者跨块级元素的写法本身就不符合规范，大部分解析工具（包括你用到的HTML解析库）都会自动“修正”这种不合法的嵌套，导致你的高亮效果跑偏。

给你两个实用的解决思路：

• 优先选：修正HTML结构，合法嵌套
  别再用<mark>直接跨<li>了，改成在每个<li>内部的对应文本片段单独加<mark>。举个例子：
  原来踩坑的写法（会被解析器修正）：

  <mark>
    <li>列表项1的后半段高亮内容</li>
    <li>列表项2的前半段高亮内容</li>
  </mark>
  

  改成符合规范的写法：

  <li>列表项1的普通内容<mark>列表项1的后半段高亮内容</mark></li>
  <li><mark>列表项2的前半段高亮内容</mark>列表项2的普通内容</li>
  

  这种写法完全符合HTML规则，不管啥解析器都不会乱改，高亮效果稳稳的。

• 特殊场景可选：自定义解析库的规则
  如果你的需求是动态生成跨<li>的高亮（比如根据搜索关键词自动匹配高亮），没法手动拆分<mark>，那可以给你用的HTML解析库加自定义处理逻辑，让它别乱改你的<mark>标签。拿常用的解析库举个代码例子：

  import parse from 'html-react-parser';
  
  // 你的原始HTML字符串
  const targetHtml = `包含跨<li>的<mark>标签的HTML内容`;
  
  // 自定义解析选项，保留mark标签的结构
  const parseOptions = {
    replace: domNode => {
      if (domNode.name === 'mark') {
        // 递归解析mark的子节点，强制保留mark标签
        return <mark>{domNode.children.map(child => parse(child.toString(), parseOptions))}</mark>;
      }
    }
  };
  
  // 解析后的内容可以直接在UI里用
  const renderedHtml = parse(targetHtml, parseOptions);
  

  不过要提醒你，这种写法还是不符合HTML规范，不同浏览器可能有渲染差异，所以能不用就尽量不用，优先选第一个方案。

备注：内容来源于stack exchange，提问作者Aditya Prakash