JavaScript convert string hrefs into onClicks

Question

I've got strings with multiple standard links like

<a href="http://example.com">Name of Link</a>

and I'm trying to turn them into

<a onClick="myFunc('http://example.com','Name of Link')">Name of Link</a>

or even just:

<a onClick="myFunc('http://example.com')">Name of Link</a>

would be great if the former was unnecessarily difficult. The links are being dynamically inserted into the DOM so event handlers won't do.

adeneo · Accepted Answer · 2016-01-18T05:51:34.480

1

You need event handlers that prevents the default action and get the href

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

for (var i=anchors.length; i--;) {
    anchors[i].addEventListener('click', func, false);
}

function func(e) {
    e.preventDefault();
    var href = this.getAttribute('href'),
        text = this.innerText;
    myFunc(href, text);
}

FIDDLE

If you have to work with strings, you can do something like this

var str = '<a href="http://example1.com">Name of Link 1</a><br /><a href="http://example2.com">Name of Link 2</a><br /><a href="http://example3.com">Name of Link 3</a><br /><a href="http://example4.com">Name of Link 4</a>';

var parser  = new DOMParser();
var doc     = parser.parseFromString(str, "text/html");
var anchors = doc.getElementsByTagName('a');

for (var i=anchors.length; i--;) {
    var href = anchors[i].getAttribute('href'),
        text = anchors[i].innerText;
        
    anchors[i].setAttribute('onclick', "myFunc('"+href+"', '"+text+"')");
    anchors[i].removeAttribute('href');
}

str = doc.body.innerHTML;

document.body.innerHTML = str;

function myFunc(href, text) {
  alert(href + ' - ' + text);
}

edited Jan 18 '16 at 05:51

answered Jan 18 '16 at 05:27

adeneo

312,895
29
395
388

And what do you mean by `dynamically posting`, are they inserted into the DOM at a later time? – adeneo Jan 18 '16 at 05:31
Yeah I'm trying to change the links before inserting it into the DOM – Michael Truong Jan 18 '16 at 05:33
Then parse the HTML, [don't work with string replacements in HTML](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags#answer-1732454) – adeneo Jan 18 '16 at 05:35
If you have the control over string then why don't you create in the way you want it ? – Rayon Jan 18 '16 at 05:41
@Rayon It's being grabbed from a database that I don't have control over :s – Michael Truong Jan 18 '16 at 05:42
Once you update the DOM using DB data, execute code provided above. There are tricky ways to update the string as a DOM before inserting in DOM too... – Rayon Jan 18 '16 at 05:44
Mm. I was really hoping for the latter since the app I'm creating is getting a bit more complicated so I'd have to find all the instances where things are being dynamically inserted, but nonetheless I'll try it out! thanks! – Michael Truong Jan 18 '16 at 05:51
@MichaelTruong - updated with something that should work with strings, and parses the HTML – adeneo Jan 18 '16 at 05:52
@adeneo not exactly what I was expecting the answer to look like but it works :) thanks! – Michael Truong Jan 18 '16 at 06:32

brk · Answer 2 · 2016-01-18T05:47:06.823

0

You can do like this

HTML

<a href="http://example.com" onclick="myFunction(this.href,this.textContent)">
  My link
</a>

JS

function myFunction(getAttr,text){
console.log(getAttr,text);

}

EXAMPLE

EDIT

if you are looking to prohibit href action then you have to use

event.preventDefault();

Updated JS

function myFunction(event,getAttr,text){
event.preventDefault();
console.log(getAttr,text);
}

UPDATED JSFIDDLE

edited Jan 18 '16 at 05:47

answered Jan 18 '16 at 05:39

brk

48,835
10
56
78

the links start off without the onclick, I'm trying to replace the href with it... – Michael Truong Jan 18 '16 at 05:41
@MichaelTruong I am sorry I could not get your problem.Did you mean that you dont want href to execute it's action? – brk Jan 18 '16 at 05:42
The first line of code is how it starts off, the second line is what I'm trying to turn it into – Michael Truong Jan 18 '16 at 05:48
So does that mean on initial page load you will have href attribute and then it will be replaced by onclick? – brk Jan 18 '16 at 05:50
the page is already loaded, the href is just a string for now that would be inserted into the DOM later – Michael Truong Jan 18 '16 at 05:52

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

Append your string in a temporary element and manipulate it as explained by adeneo

Try this:

var str = '<a href="http://example.com">Name of Link</a>';
var elem = document.createElement('div');
elem.innerHTML = str;
var targetEleme = elem.getElementsByTagName('a')[0];
targetEleme.addEventListener('click', function(e) {
  e.preventDefault();
  var href = this.getAttribute('href'),
    text = this.innerText;
  myFunc(href, text);
});
document.body.appendChild(targetEleme);

function myFunc(href, text) {
  alert('HREF: ' + href + '   TEXT: ' + text);
}

Fiddle here

edited May 23 '17 at 11:52

Community

1
1

answered Jan 18 '16 at 05:51

Rayon

36,219
4
49
76

Hmm, I tried playing with this a bit. I can't tell, if I'm looping through a database would the event listener disappear? and wouldn't this not work for strings with other text and multiple links? – Michael Truong Jan 18 '16 at 06:12

JavaScript convert string hrefs into onClicks

3 Answers3