javascript - 使用部分替换存储为字符串的html元素

Question

我正在使用 node.js 从 API 中提取 html，我在显示它之前将它存储在一个变量中。我需要替换该 html 字符串中的链接，但我只能使用链接的前面部分进行搜索，因为它们是动态的。

我找到了一个使用 document.querySelectorAll("a[href^='http://somelink.com/12345678']")

效果很好的示例

Javascript getElement by href?

但我没有使用 DOM。

需要删除/替换的动态链接:

<a href="http://somelink.com/12345678-asldkfj>Click Here</a>
<a href="http://somelink.com/12345678-clbjj>Click Here</a>
<a href="http://somelink.com/12345678-2lksjd>Click Here</a>

我可以搜索的内容:

<a href="http://somelink.com/12345678

我需要更改实际链接名称“单击此处”或删除该元素。

有什么想法可以用纯 JS 实现吗？最初我在想也许有一种方法可以创建一个假的/临时的 DOM？

编辑:用我的代码修改下面的答案，它完全满足了我的需要。

var str = '<a href="http://somelink.com/12345678-asldkfj">Click Here</a><a href="http://somelink.com/12345678-clbjj">Click Here</a><a href="http://somelink.com/12345678-2lksjd">Click Here</a>';
var div = document.createElement("div");
div.innerHTML = str;

var links = div.querySelectorAll("a[href^='http://somelink.com/12345678']");

for(i=0; i<links.length; i++) {
    if(links[i]) {
        str = str.replace(links[i].outerHTML, 'New Name');
  }
}

console.log(str);

Answer 1

你没有得到任何东西，因为你的链接 href 属性没有正确结束，最后缺少一个 "，如果你修复它，一切都会好起来的.

否则，如果您不使用 HTML 和 DOM，则可以将 HTML 字符串附加到临时 DOM 元素中，如下所示:

var str = '  <a href="http://somelink.com/12345678-asldkfj">Click Here</a>'
+'<a href="http://somelink.com/12345678-clbjj">Click Here</a>'
 + '<a href="http://somelink.com/12345678-2lksjd">Click Here</a>';
 var div = document.createElement("div");
 div.innerHTML = str;

var links = div.querySelectorAll("a[href^='http://somelink.com/12345678']");
console.log(links);

注意:

要在 nodejs 环境中使用此代码，您需要使用 DOM 解析器模块，这些模块可以帮助您:

• dom-parser module .
• jsdom module .
• xmldom 模块。