javascript - JS - 对于字符串中具有特定 URL 的每个 anchor 链接，用其文本替换 anchor 链接

Question

举一个我想要的例子，想象一下这个字符串:

$text = 'lorem ipsum <a href="/s/about">About us</a> lorem ipsum';

如果此字符串包含一个 href 以 / 开头的 anchor 链接，则仅将整个 anchor 链接替换为其内部文本。此函数的结果将返回以下内容:

lorem ipsum About us lorem ipsum

为此，我改编了过去使用过的一个函数:

function replaceAnyQueriedElementByItsText(markup, selector) {
  const doc = (new DOMParser)
    .parseFromString(markup, "text/html");

  doc
    .body
    .querySelectorAll(selector)
    .forEach(node => node
      .parentNode
      .replaceChild(
        document.createTextNode(node.text),
        node,
      )
    );

  return doc.body.innerHTML;
}

问题在于它需要一个选择器，比如一个类。但是我只想选择具有特定 href 的 anchor 。我怎样才能做到这一点？

Answer 1

您可以使用 a[href^="/"] 作为选择器。因此，作为您函数的参数，它将是:

replaceAnyQueriedElementByItsText(markup, 'a[href^="/"]');

例子:

function replaceAnyQueriedElementByItsText(markup, selector) {
  const doc = new DOMParser().parseFromString(markup, "text/html");

  doc.body.querySelectorAll(selector).forEach(node => 
    node.parentNode.replaceChild(
        document.createTextNode(node.text),
        node,
    )
  );

  return doc.body.innerHTML;
}

// Example:
let markup = 'lorem ipsum <a href="/s/about">About us</a> lorem ipsum';
let stripped = replaceAnyQueriedElementByItsText(markup, 'a[href^="/"]');
console.log(stripped);