Find all the links and replace them with their href value

Question

I think I have a string like:

<a href="site/project/109#" target="_blank">href</a> text, text, <a href="/target" class="test">test</a>

And I need to output

 site/project/109# text, text, test

I can find all links

var txt = msg.match(/\<a\shref=\"(.*)\"\s(.*)[\<\/a\>]/gmi);

And in loop make replace. But I would like to shorten the code, do everything through single replace, like this :

var txt = msg.replace(/\<a\shref=\"(.*)\"\s(.*)[\<\/a\>]/gmi, $1);

But in this case I get: [object HTMLHeadElement]

[Don't parse HTML with regex](http://stackoverflow.com/a/1732454/5459839) — trincot, Jan 21 '17 at 10:43
why not retrieve elements and their href with `document.getElementsByTagName('a')`? — sid-m, Jan 21 '17 at 10:44
From the error message it is also clear that `msg` is not a string. — trincot, Jan 21 '17 at 10:45
I don't understand, why don't you want the second anchor tag converted? — theonlygusti, Jan 21 '17 at 11:12

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

Never use regex to parse HTML, it's better to generate an element with the content and do the rest on the element.

var str = '<a href="site/project/109#" target="_blank">href</a> text, text, <a href="/target" class="test">test</a>';

// create an element
var temp = document.createElement('div');

// set the content with the string
temp.innerHTML = str;

// get all `a` tags and convert into array
// for older browser use `[].slice.call() 
// for converting into array
Array.from(temp.querySelectorAll('a')).forEach(function(ele) {
  // create a text node with the attribute value 
  var text = document.createTextNode(ele.getAttribute('href'));
  // replace a tag wit the text node
  ele.replaceWith(text);
});

// get the updated html content
console.log(temp.innerHTML)

Why not regex ? : RegEx match open tags except XHTML self-contained tags

UPDATE : The msg variable is an element object, a not string that's why it's getting converted to [object HTMLHeadElement](HTMLHeadElement refers to the HEAD tag, I think something wrong with your core check that also). So do the same as above where replace temp with the msg. In case you want to keep the original element content then generate temp element as above and set content as temp.innerHTML = msg.innerHTML .

I understand, regexp takes my string as html? – Oleksandr Maliuta Jan 21 '17 at 10:51 — Oleksandr Maliuta, Jan 21 '17 at 10:51

score 0 · Answer 2 · answered Jan 21 '17 at 11:10

If you're using jQuery (which is great and does all things) then you can get the href quite easily:

var string = '<a href="site/project/109#" target="_blank">href</a> text, text, <a href="/target" class="test">test</a>';
var href = $(string).attr('href');

which means that setting the text of the anchor tag is trivial:

$(string).text($(string).href));

Find all the links and replace them with their href value

2 Answers2