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

我使用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

”；
var div=document.createElement（“div”）；
div.innerHTML=str；
var links=div.querySelectorAll（“a[href^=”http://somelink.com/12345678']");
对于（i=0；i你什么也得不到，因为你的链接
href
属性没有正确结束，结尾缺少一个
“
，如果你修复了它，一切都会好的

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


var str=''
+''
+ '';
var div=document.createElement（“div”）；
div.innerHTML=str；
var links=div.querySelectorAll（“a[href^=”http://somelink.com/12345678']");
console.log（links）；
你什么也得不到，因为你的links
href
属性没有正确结束，结尾缺少一个
“
，如果你修复它，一切都会好的

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


var str=''
+''
+ '';
var div=document.createElement（“div”）；
div.innerHTML=str；
var links=div.querySelectorAll（“a[href^=”http://somelink.com/12345678']");
console.log（links）；
假dom在这里会被严重破坏。您所需要的只是一个字符串替换。如果您确实知道字符串是安全的，那么这个示例就足够了

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

要从html字符串获取链接数组，请执行以下操作：


匹配
），捕获$1中的开始标记和$3中的结束标记
用开始标记替换字符串，后跟新文本，后跟结束标记


const linksHtml=document.querySelector（'#links'）.innerHTML
//请注意，捕获组2实际上甚至不会捕获“最短字符串”
//虽然它匹配$replace（）中的2将返回大量无用字符串。
常量主播模式=/(
还有一些随机的文字

其中一个链接可能位于段落中

结果:
在这里，伪造的dom会被严重破坏。您所需要的只是一个字符串替换。如果您确信您的字符串是安全的，那么这个示例就足够了

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

要从html字符串获取链接数组，请执行以下操作：


匹配
），捕获$1中的开始标记和$3中的结束标记
用开始标记替换字符串，后跟新文本，后跟结束标记


const linksHtml=document.querySelector（'#links'）.innerHTML
//请注意，捕获组2实际上甚至不会捕获“最短字符串”
//虽然它匹配$replace（）中的2将返回大量无用字符串。
常量主播模式=/(
还有一些随机的文字

其中一个链接可能位于段落中

结果:
您可以使用字符串搜索或正则表达式（）来尝试操作html字符串。但是，您可以并且更容易地导入创建DOM解析/操作方法的包，如（jQuery-like）或

从那里，您可以将字符串解析为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();

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

您可以使用字符串搜索或正则表达式（）来尝试操作html字符串。但是您可以并且更容易地导入创建DOM解析/操作方法的包，如（jQuery-like）或

从那里，您可以将字符串解析为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();

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

这真的很有帮助，任何方法都可以更改链接的“单击此处”部分或将其完全删除？您拥有的链接数组将只是一个大的html字符串，但我没有像那样将它们拉出。更新了答案。答案都在那里。感谢您再次修改。它似乎正在替换所有链接，我只需要特定的情况s、 @chsdk确实有效，只是使用了jsDOM，但可能会像你建议的那样过度。是的，它正在替换所有链接，因为我将其编码为替换所有链接。我不知道你到底需要什么，所以我编写了一个通用示例，为你提供所需的技术。研究这里实际发生的情况，然后根据你的用例进行调整。你可以只解析出你想要处理的链接，而不是所有的链接，或者你可以用它来拆分出你真正想要更改的链接。这真的很有帮助，任何方法都可以只更改链接的“单击此处”部分或完全删除它？你拥有的链接数组只是一个大的html字符串，但我没有将它们拉出类似的。更新了答案。都在里面。谢谢你再次修改。它似乎在替换所有链接，我只需要某些案例。@chsdk确实有效，只是使用jsDOM，但可能会像你建议的那样过度。是的，它正在替换所有链接，因为我将其编码为替换所有链接。我不知道你到底需要什么，所以我写了一篇文章通用示例为您提供所需的技术。研究此处实际发生的情况，然后根据您的用例进行调整。您可以从只解析您想要创建的链接开始