Javascript 如何替换html中的多个字符串，以便在jsx组件中包装项目？

我的博客有WordPress内容，如下所示：

<ul>
<li>Bla 1</li>
<li>Bla 2</li>
<li>Bla 3</li>
<li>Bla 4</li>
<li>Bla 5</li>
<li>Bla 6</li>
</ul>

Bla 1
Bla 2
Bla 3
Bla 4
Bla 5
Bla 6

我需要将

和

替换为React打开和关闭组件标签，以便在两个列表项后显示“显示更多”（React显示更多文本节点包）按钮

我尝试使用react string replace node包来执行此操作，但是它每行只能执行一个正则表达式操作，并且我无法返回非关闭的JSX组件： 第一行正则表达式将替换为，最后是：

 <ShowMoreText>     
    <li>Bla 1</li>
    <li>Bla 2</li>
    <li>Bla 3</li>
    <li>Bla 4</li>
    <li>Bla 5</li>
    <li>Bla 6</li>
    </ul>

Bla 1
Bla 2
Bla 3
Bla 4
Bla 5
Bla 6

然而，我不能执行第二个正则表达式，因为我不能返回一个不完整的JSX代码——我需要为它包含一个结束标记

有没有办法返回一个不完整的JSX代码，然后在第二次运行正则表达式时完成它？或者，我这样做是完全错误的，如果是这样的话，最好的方法是什么

编辑：WordPress内容并不总是以

开头，因此最好的解决方案是包含一种处理整个博客文章的方法，并返回

替换为
，
替换为
，您可以使用
将html字符串转换为
JXS
元素。使用
replace
功能替换其他元素的
UL
节点，并使用
domToReact
渲染其子元素：

import parse, { domToReact } from "html-react-parser";

const text = `<div><ul>
                  <li>Bla 1</li>
                  <li>Bla 2</li>
                  <li>Bla 3</li>
                  <li>Bla 4</li>
                  <li>Bla 5</li>
                  <li>Bla 6</li>
                </ul></div>`;

  const render = () => {
    return parse(text, {
      replace: ({ tagName, children }) => {
        if (tagName === "ul") {
          return <ShowMoreText>{domToReact(children)}</ShowMoreText>;
        }
      }
    });
  };
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      {render()}
    </div>
  );
}

import parse，{domToReact}来自“html反应解析器”；
常量文本=`

Bla 1
Bla 2
Bla 3
Bla 4
Bla 5
Bla 6
`；
常量渲染=（）=>{
返回解析（文本{
替换：（{标记名，子项}）=>{
如果（标记名==“ul”）{
返回{DOMTREACT（儿童）}；
}
}
});
};
返回(
你好，斯塔克布里兹！
开始编辑以查看发生的奇迹：）

{render（）}
);
}

那太好了，我只是觉得如果标签前面有任何东西，这就不起作用了。这只是返回如果我（很可能在任何博客帖子上）在列表之前有一些内容，我可以使用这个吗
Bla 1
Bla 2
我又更新了，我想现在更清楚了