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

Question

我正在使用 React 和 Javascript，并且有一个要求，我需要提取某些锚标记，获取它们的属性，如 id、href 并从中创建一个自定义的 React 链接组件。 我的字符串看起来像这样 "<p>Bla bla bla bla.</p>\n<ul>\n<li><strong>Bla bla</strong>. Bla bla bla.</li>\n<li><strong>Bla bla bla</strong>.<a href='#footnote1' id='sup1'><sup>1</sup></a> Bla bla bla.</li>\n<li><strong>Bla bla bla.<a href='#footnote2' id='sup2'><sup>2</sup></a>\r\n</strong>  Bla bla bla.</li>\n<li><strong>Bla bla:</strong>Bla bla <a href=\"https://google.com\" target=\"no\">Google</a> * bla bla bla.<a href='#footnote1' id='sup3'><sup>1</sup></a></li>\n</ul>\n<p> </p>"

我只想提取其中包含<sup> 的所有<a>。然后我想获取此类<a> 的属性并创建一个自定义的 React 链接组件，例如

<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>

然后我想用字符串中的自定义组件替换那些<a>。我试图将<a> 转换为自定义组件的原因是我希望新的锚标记符合 A11Y 并且锚标记和源字符串不在我的控制范围内。

我尝试了How to get the href value of an anchor tag with javascript from a string 和javascript regex to extract anchor text and URL from anchor tags 的组合，但没有取得太大进展。 我也试过react-string-replace，但也没多大帮助。

我还可以选择将<a href='#footnote1' id='sup1'><sup>1</sup></a> 替换为#FootNote({id:\"sup1-CB\", goto:\"sup1\", data:\"1\"})#FootNote 之类的东西，然后使用“id”、“goto”和“data”来创建自定义链接。

谁能提供一些关于如何实现这一目标的指导？ 对于这个冗长的问题，我深表歉意。

Answer 1

这里有一个例子，它使用创建的标签来解析你的 html，然后使用 DOM 方法来提取你需要的数据：

const str =
  "<p>Bla bla bla bla.</p>\n<ul>\n<li><strong>Bla bla</strong>. Bla bla bla.</li>\n<li><strong>Bla bla bla</strong>.<a href='#footnote1' id='sup1'><sup>1</sup></a> Bla bla bla.</li>\n<li><strong>Bla bla bla.<a href='#footnote2' id='sup2'><sup>2</sup></a>\r\n</strong>&#160; Bla bla bla.</li>\n<li><strong>Bla bla:</strong>Bla bla <a href=\"https://google.com\" target=\"no\">Google</a> * bla bla bla.<a href='#footnote1' id='sup3'><sup>1</sup></a></li>\n</ul>\n<p>&#160;</p>";

const el = document.createElement("html");
el.innerHTML = str;
const anchors = el.getElementsByTagName("a");

const MyLink = () => null;
const myClickHandler = () => null;

export default () =>
  [...anchors].map((anchor, index) => {
    const sup = anchor.getElementsByTagName("sup");
    if (sup.length === 0) {
      return null;
    }

    return (
      <MyLink
        key={index.toString()}
        id={anchor.id}
        addClasses={"footnote-link"}
        href={anchor.href}
        handleClick={myClickHandler}
        ariaProps={{
          label: sup[0].innerHTML
        }}
      >
        <sup className={anchor.href ? "custom-class" : ""}>{sup[0].innerHTML}</sup>
      </MyLink>
    );
  });

将MyLink 和myClickHandler 替换为您自己的。

Answer 2

您可以考虑解析 HTML 并使用 DOM 方法对其进行修改，然后将其呈现为字符串。下面的演示只是一个概念证明，但它可以被合并到一个做同样事情的 React 组件中。

注意：这类似于Dean's answer，后者有一个更特定于 React（并且可以说更简洁）的示例。

const input = "<p>Bla bla bla bla.</p>\n<ul>\n<li><strong>Bla bla</strong>. Bla bla bla.</li>\n<li><strong>Bla bla bla</strong>.<a href='#footnote1' id='sup1'><sup>1</sup></a> Bla bla bla.</li>\n<li><strong>Bla bla bla.<a href='#footnote2' id='sup2'><sup>2</sup></a>\r\n</strong>&#160; Bla bla bla.</li>\n<li><strong>Bla bla:</strong>Bla bla <a href=\"https://google.com\" target=\"no\">Google</a> * bla bla bla.<a href='#footnote1' id='sup3'><sup>1</sup></a></li>\n</ul>\n<p>&#160;</p>"

const parser = new DOMParser();

const doc = parser.parseFromString(input, 'text/html');

// might be a more efficient way to do this. just querying for anchors
// and filtering out the ones that don't have a <sup> child
const anchors = [...doc.querySelectorAll('a')].filter(elem => elem.querySelector('sup'));

anchors.forEach(a => {
  const sup = a.querySelector('sup');
  a.setAttribute('aria-label', sup.innerText);
  // etc.
})

document.getElementById('demo').innerHTML = doc.body.innerHTML;
document.getElementById('source').innerText = doc.body.innerHTML;

<h2>Resulting html</h2>
<pre id="source"></pre>

<hr/>

<h2>Rendered result</h2>
<div id="demo"></div>