使用partialreplace存储为string的html元素
我使用node.js从一个API拉入HTML，我将它存储在一个variables之前，我显示它。 我需要replace该HTMLstring中的链接，但我只能使用链接的前部进行search，因为它们将是dynamic的。
我发现了一个使用document.querySelectorAll("a[href^='http://somelink.com/12345678']")
Javascript getElement的href？
但是我没有使用DOM。
需要删除/replace的dynamic链接：
<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>
我可以search的是：
<a href="http://somelink.com/12345678
我需要更改实际的链接名称“单击此处”或删除元素。
任何想法如何实现与纯JS的这个？ 最初，我想也许有一种方法来创build一个假/临时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);
你没有得到任何东西，因为你的链接href属性没有正确结束，有一个缺失"最后，如果你修复它，一切都会好的。
否则，如果您不使用HTML和DOM，则可以将HTMLstring附加到临时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);
你可以使用stringsearch或正则expression式（ 但不应该除非非常简单的HTML ）试图操纵你的HTMLstring。 但是你可以并且更容易导入创buildDOMparsing/操作方法的包，比如Cheerio （jQuery like）或者jsDOM 。
从那里你将parsingstring到一个DOM文档，做查询和replace文本或通过他们的方法删除元素。
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();
一个假的dom在这里会被严重的杀死。 所有你需要的是一个stringreplace。 如果你确定你的琴弦是安全的，那么这个例子就足够了。
编辑 ：添加parsing一个HTMLstring，以生成工作的链接数组，并添加了innerText的替代。
从htmlstring获取链接数组：
-
匹配
<a，然后是0，然后是>，然后是>，然后是尽可能最短的string，以匹配其余部分，然后是</a> -
这个模式包括开始/结束标签的捕获组，因为那样我们可以重复使用相同的模式来代替锚的innerText。
要replace每个链接的href：
- 匹配
href="，后面跟着1个或更多"，后面跟着" - 用
href="replace完整的匹配，然后是新的url，接着是"。
要replaceanchor的innerText：
- 匹配（
<a，接着是0或更多不>，后跟>），然后是匹配的最短string，然后是（</a>），捕获$ 1中的开始标记和结束$ 3中的标记。 - 将stringreplace为开始标记，然后是新文本，然后是结束标记。
const linksHtml = document.querySelector('#links').innerHTML // Note that capture group 2 will not actually capture "shortest string" even // though it matches. $2 in a replace() would return huge useless string. const anchorPattern =/(<a[^>]*>)(.*?)(<\/a>)/g const links = linksHtml.match(anchorPattern) const newUrls = [ 'http://someotherlink.com/cool', 'http://someotherlink.com/happy', 'http://someotherlink.com/smile' ] const newText = [ 'Cool', 'Happy', 'Smile', ] const replaced = links // replace urls .map( (link, i) => link.replace(/(href=")[^"]+"/, `$1${newUrls[i]}"`) ) // replace innerText .map( (link, i) => link.replace(anchorPattern, `$1${newText[i]}$3`) ) document.querySelector('pre') .innerText = JSON.stringify(replaced,null,2)
<div id="links"> <h2>Probably will be a header.</h2> <a href="http://somelink.com/12345678-asldkfj">Click Here</a> <p>And maybe some random text.</p> <a href="http://somelink.com/12345678-clbjj">Click Here</a> <p>One of the links might be in a paragraph. <a href="http://somelink.com/12345678-2lksjd">Click Here</a></p> </div> <h2>Result: </h2> <pre/>