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

Question

I'm using node.js to pull in html from an API, I'm storing it in a variable before I display it. I need to replace a link in that html string but I'm only able to use the front part of the link to search, as they will be dynamic.

I found an example that would work great using document.querySelectorAll("a[href^='http://somelink.com/12345678']")

Javascript getElement by href?

But I'm not using the DOM.

Dynamic Links that need to be removed/replaced:

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

What I can search on:

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

I need to either change the actual link name "Click Here" or remove the element.

Any ideas how to achieve this with plain JS? Initially I'm thinking maybe there is a way to create a fake/temp DOM?

EDIT: Modifying the answer below with my code, it did exactly what I needed.

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

You don't get nothing because your links href attribute are not correctly ended, there's a missing " at the end, if you fix it, everything will be fine.

Otherwise if you are'nt using HTML and DOM, you can append your HTML string in a temporary DOM element like this:

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

Note:

To use this code in a nodejs environment you will need to use a DOM parser module , these are some modules that can help you:

• dom-parser module .
• jsdom module .
• xmldom module.

Answer 2

A fake dom would be serious over-kill here. All you need is a string replace. If you know for sure that your strings are safe, then this example should be sufficient.

Edit : Added parsing an html string to generate the array of links to work on and added replacement of innerText.

To get an array of links from an html string:

• Match <a , followed by 0 or more not > , followed by > , followed by shortest possible string to rest of the match, followed by </a>

• This pattern includes capture groups for the opening/closing tags because then we can reuse the same pattern to replace the anchor's innerText later.

To replace the href of each link:

• Match href=" , followed by 1 or more not " , followed by "
• Replacing the full match with href=" , followed by new url, followed by " .

To replace innerText of anchor:

• Match ( <a , followed by 0 or more not > , followed by > ), followed by shortest possible string to rest of the match, followed by( </a> ), capturing the opening tag in $1 and closing tag in $3.
• Replace string with opening tag, followed by new text, followed by closing tag.

 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/> 

Answer 3

You could use string searching or regular expressions ( but shouldn't unless extremely simple html ) to try to manipulate your html string. But you can, and would be easier to, import packages that create DOM parsing / manipulation methods, like Cheerio (jQuery like) or jsDOM .

From there you would parse the string into a DOM document, do the querying and replacing the text or removing the elements through their methods.

jsDOM Example:

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 Example:

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