CODEWITHSUNDEEP
javascriptregex
Santosh Kumar Sahoo
Santosh Kumar Sahoo

Reputation: 23

Javascript and RegEx: add an attribute to all anchor tags in a text using regular expression, Javascript

I have to do a mass update on a lot of records and these records have anchor tags in them. My script should be able to add target = '_blank' to all the anchor tags. I need to use Javascript and a regular expression.

So far I have come up with a regular expression that can look for all the href attributes, but have not been able to figure out how to replace all the tags.

The below code snippet shows that my regular expression works, but how do I make sure all the anchor tags are replaced?

The below snippet only replaces the last tag. 

function myFunction() {
    // get the text to work with
    var str = document.getElementById("demo").innerHTML;
  
    //Look for href attribute and add target attribute, to use it as a replacement
     var x = /href.*=.*['""].+?['""]/.exec(str)  + " target = '_blank'";
  
     // Replace the 1st anchor tag 
     var res = str.replace(/(href.*=.*['""].+?['""])/, x);

    document.getElementById("result").innerHTML = res;
}
<p>Click the button to replace "blue" with "red" in the paragraph below:</p>

<p id="demo"><a href = 'link1' > TAG1 </a> , <a href = 'link2' > TAG2 </a> ,  <a href = 'link3' > TAG3 </a></p>
<p id="result"></p>

<button onclick="myFunction()">Try it</button>

Upvotes: 1

Views: 1565

Answers (2)

SamWhan
SamWhan

Reputation: 8332

Wouldn't a more appropriate approach be to do it all using the DOM, avoiding the hated by all ;) parsing of HTML using regex.

function myFunction() {
  
    // get the elements to work with
  
    var arrAnchors = document.getElementById("demo").getElementsByTagName("a"),
        i;

    // Set the targets for each of them
    for(i=0;i<arrAnchors.length;i++) {
         arrAnchors[i].setAttribute("target", "_blank");
    }
}
<p>Click the button to change the links below.</p>

<p id="demo"><a href='link1'> TAG1 </a> , <a href='link2'> TAG2 </a> , <a href='link3'> TAG3 </a>
</p>
<p id="result"></p>

<button onclick="myFunction()">Try it</button>

This would avoid things like a text on the page, like crashreference, (although it should be written as two words, i know ;) being changed into crastarget="_blank" hreference.

Just a thought.

Regards

Upvotes: 1

timolawl
timolawl

Reputation: 5564

You can use this instead of what you currently have:

var res = str.replace(/href/g, 'target="_blank" href');

Here is the working code:

function myFunction() {
  // get the text to work with
  var str = document.getElementById("demo").innerHTML;

  //Look for href attribute and add target attribute

  // Replace on all the anchor tag 
  var res = str.replace(/href/g, 'target="_blank" href');

  document.getElementById("result").innerHTML = res;
}
<p>Click the button to replace "blue" with "red" in the paragraph below:</p>

<p id="demo"><a href='link1'> TAG1 </a> , <a href='link2'> TAG2 </a> , <a href='link3'> TAG3 </a>
</p>
<p id="result"></p>

<button onclick="myFunction()">Try it</button>

Upvotes: 1

Related Questions