Let's suppose that I have an HTML string containing some <a href=".."> tags. How can I replace all of them to translate this:

<a href="">whatever</a>

into this:

<a href="#" onclick="openLink('')">whatever</a>

Any ideas?

Let's suppose that I have an HTML string containing some <a href=".."> tags. How can I replace all of them to translate this:

<a href="http://www.mylink.">whatever</a>

into this:

<a href="#" onclick="openLink('http://www.mylink.')">whatever</a>

Any ideas?

• javascript
• html
• regex

Share Improve this question Follow edited Apr 18, 2014 at 19:47 The Guy with The Hat 11.1k1010 gold badges6161 silver badges8282 bronze badges asked Apr 18, 2014 at 19:38 FidoBoyFidoBoy 39277 silver badges1818 bronze badges 3

• Is there a reason why you want to use a regex for this? – d_inevitable Commented Apr 18, 2014 at 19:40
• 4 Obligatory link. – The Guy with The Hat Commented Apr 18, 2014 at 19:44
• Ok, i don't need to use a regex, just a way to replace the links in that way – FidoBoy Commented Apr 18, 2014 at 19:46

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can use this regex on your string:

var re = new RegExp("<a href=\"([^\"]+)\"", "g");
  result = 
    string.replace(re, 
      "<a href=\"#\" onclick=\"openLink('$1')\"");

http://regex101./r/wN0aB2

---

Update
To account for attributes before the href, you could use:

var re = new RegExp("<a([^>]* )href=\"([^\"]+)\"", "g");
  result = 
    string.replace(re, 
      "<a$1href=\"#\" onclick=\"openLink('$2')\"");

http://regex101./r/bZ0nO4

You can easily do this using JS.

Find all anchor elements in DOM and setAttributes:

var anchors = document.getElementsByTagName("a");
for(var i =0; i < anchors.length; i++)
{       var myLink = anchors[i].getAttribute("href");
        anchors[i].setAttribute("href","#");
        anchors[i].setAttribute("onclick", "openLink('"+ myLink +"');");
}

Don't use RegExp, because it is very hard, if not impossible, to safely restrict the matches to just the anchor links that you are targeting. Instead you should use the very DOM parser that naturally every browser has built in.

And don't use onclick html attributes, because there is no need to tweak html in javascript to add javascript event handlers and it prevents users from using things like right click -> 'open in new tab', or 'copy link address'.

Use this:

var anchors = document.getElementsByTagName("a");

for (var i = 0 ; i != anchors.length ; i++) {
  anchors[i].addEventListener("click", function (event) {

     var href = this.getAttribute("href");

     if (href) {
       event.preventDefault();
       openLink(href);
     }
  });
}

See jsfiddle

Or you can use a delegated event handler:

function openLink(href) {
 alert("openLink " + href);   
}

document.addEventListener("click", function (event) {
    if (event.target.tagName === "A" && event.target.href) { 
        event.preventDefault();
        openLink(event.target.href);
    }
});

See jsfiddle

Or you can use jQuery:

$("a[href]").click(function (event) {
   event.preventDefault();
   openLink($(this).attr("href"));
});

See jsfiddle

result = subject.replace(/<a.*?href="(.*?)".*?>(.*)<\/a>/img, "<a href=\"#\" onclick=\"openLink('$1')\">$2</a>");

http://regex101./r/dK2oU5