Question

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

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

效果很好的示例

但我没有使用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

我需要更改实际的链接名称“Click Here”或删除元素。

任何想法如何用普通的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元素中：

＆＃13;

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

＆＃13;

注意：

要在nodjs环境中使用此代码，您需要使用 DOM解析器模块，这些是可以帮助您的一些模块：

dom-parser module。

jsdom module。

xmldom模块。

Answer 2

假dom在这里严重过度杀戮。您只需要一个字符串替换。如果你确定你的字符串是安全的，那么这个例子就足够了。

编辑：添加了解析html字符串以生成要处理的链接数组，并添加了innerText的替换。

从html字符串中获取一系列链接：

匹配<a，然后是0或更多，而不是>，然后是>，接着是匹配其余部分的最短字符串，然后是{{1} }
此模式包含开始/结束标记的捕获组，因为我们可以重复使用相同的模式来替换锚点的innerText。

要替换每个链接的href：

匹配</a>，后跟一个或多个href="，后跟"
将完整匹配替换为"，然后是新网址，然后是href="。

替换锚点的innerText：

匹配（"，后跟0或更多而不是<a，然后是>），然后是匹配其余部分的最短可能字符串，然后是（{{1} }），捕获$ 1中的开始标记并以$ 3结束标记。
将字符串替换为开始标记，后跟新文本，然后关闭标记。

＆＃13;

</a>

＆＃13;

Answer 3

您可以使用字符串搜索或正则表达式（but shouldn't unless extremely simple html）来尝试操纵您的html字符串。但您可以并且更容易导入创建DOM解析/操作方法的包，例如Cheerio（类似jQuery）或jsDOM。

从那里你可以将字符串解析为DOM文档，进行查询并替换文本或通过方法删除元素。

jsDOM示例：

const JSDOM = require("jsdom");
const dom = new JSDOM(yourHtmlString);
const document = dom.window.document;

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

for(let i=0; i<elements.length; i++){
  elements[i].textContent = "Replacement text";
  //element.remove() if removing
}

var resultHtml = dom.serialize();

Cheerio示例：

var cheerio = require('cheerio');
$ = cheerio.load(yourHtmlString);

$("a[href^='http://somelink.com/12345678']").text('Text to Replace "Click Here"');
//or .remove() if wanting to remove

var htmlResult = $.html();

使用部分

3 个答案: