Javascript从字符串中提取锚定标记并从中创建新的React组件

我使用的是React和Javascript，需要提取某些锚定标记，获取它们的属性（如id、href）并从中创建自定义React链接组件。 我的绳子看起来像这样

“布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉

我只想提取所有这些
和，但无法取得多大进展。
我也试过了，但也没有多大帮助

我还可以选择将
替换为
#脚注（{id:\'sup1 CB\'，goto:\'sup1\'，data:\'1\'}）#脚注
，然后使用“id”，“goto”和“data”创建自定义链接

有谁能为如何实现这一目标提供一些指导？
很抱歉问了这么长的问题。
下面是一个示例，它使用创建的标记解析html，然后使用DOM方法提取所需的数据：

const str=
“布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉；
const el=document.createElement（“html”）；
el.innerHTML=str；
常量锚=el.getElementsByTagName（“a”）；
常量MyLink=（）=>null；
常量myClickHandler=（）=>null；
导出默认值（）=>
[…锚点].map（（锚点，索引）=>{
const sup=anchor.getElementsByTagName（“sup”）；
如果（辅助长度===0）{
返回null；
}
返回(
{sup[0].innerHTML}
);
});

替换代码> MyLink 和<代码> MyCclikHealts用自己的.< /p> 您可以考虑解析HTML并使用DOM方法修改它，然后将其以字符串形式呈现出来。下面的演示只是一个概念证明，但是它可以被合并到一个React组件中，该组件可以做同样的事情
注意：这类似于一个更具反应特异性（并且可以说更干净）的示例


const-input=“blablablablablablablabla.
\n
\n
blablablablabla.
\n
blablablabla.blablablablablabla.
\n
blablablablablablabla.\r\n&160；blablablablablablablablablabla>\n
\n
\n
const parser=new DOMParser（）；
const doc=parser.parseFromString（输入'text/html'）；
//这可能是一种更有效的方法。只是查询锚
//过滤掉那些没有孩子的孩子
常量锚点=[…doc.queryselectoral（'a'）].filter（elem=>elem.querySelector（'sup'））；
anchors.forEach（a=>{
const sup=a.querySelector（'sup'）；
a、 setAttribute（'aria-label'，sup.innerText）；
//等等。
})
document.getElementById（'demo'）.innerHTML=doc.body.innerHTML；
document.getElementById（'source'）.innerText=doc.body.innerHTML
生成的html

渲染结果
这很有帮助。谢谢它帮助我用自定义链接组件替换锚定标记。但是，我还需要在浏览器上显示源字符串（以及所有p、ul、li等），并用我的自定义链接替换锚定标记。在页面呈现一次之后，我是否应该在此处使用useffect（）使用新字符串（即由自定义链接替换的锚）更新DOM？同样的方法也可以用于提取
ul
和
li
节点。它的复杂性将取决于源结构的动态性。您的响应很快。在那之后我编辑了我最后的回复。李，我不是想榨取ul。在用自定义链接替换锚定标记后，我试图在浏览器上呈现我的源字符串bla-bla
…
。我希望我说的有道理。谢谢@ray hatfield！这个解决方案看起来也很有希望，但问题是我不想只向锚标记添加几个属性。我想用我在问题中描述的自定义React链接组件完全替换这些锚定标记。明白。这并不是一个完整的解决方案，只是指明了方向。与字符串操作相比，使用文档/DOM将使提取您需要的任何信息变得更加容易，并且更不容易出错。
<MyLink
      id={id of the anchor tag}
      addClasses={"footnote-link"}
      href={href of anchor tag}
      handleClick={myClickHandler}
      ariaProps={{
        label: {text inside the sup tag}
      }}
    >
      <sup className={href of anchor tag !== null ? "custom-class" : ""}>{text inside the sup tag}</sup>
    </MyLink>