How to replace HTML link with text link?

Question

i want to replace html links in a string with text links, for example:

<a href="test.com"> should become test.com.

I cant figure out any regex matching all my patterns. Cause links might have more attributes in different orders:

<a class="test" href="test.com" title="test">

How can i achieve that?

Maybe post some code and show us what you've tried to solve the problem — Isaac Vidrine, Apr 05 '19 at 18:17
Don't use a regexp, parse the string into a DOM fragment and use DOM methods. — Barmar, Apr 05 '19 at 18:19
RegExp can't parse HTML, use document.links collection to find links. But a llink needs HTML, plain text is ... well ... plain text, clicking on it doesn't trigger navigation. — Teemu, Apr 05 '19 at 18:19
What about the link text? An HTML link should be in the form `text`. — Barmar, Apr 05 '19 at 18:19
Why do the other attributes cause a problem? You can just skip over everything else with `[^>]*`. — Barmar, Apr 05 '19 at 18:21
You didn't find all that important enough information to include it to the question? — Teemu, Apr 05 '19 at 18:36
https://stackoverflow.com/questions/7977945/html-parser-on-node-js/7978072#7978072 Use a parser, all the regexps will go to haywire if you'll get some encoded strings. — Teemu, Apr 05 '19 at 18:38

Ikechukwu Eze · Answer 1 · 2019-04-05T18:39:11.777

0

let str = '<a class="test" href="test.com" title="test">'
let result = str.split(/href="/)[1].split('"')[0]
console.log(result)

edited Apr 05 '19 at 18:39

answered Apr 05 '19 at 18:26

Ikechukwu Eze

2,703
1
13
18

Pranav C Balan · Answer 2 · 2019-04-05T18:45:02.273

Create a temporary DOM element with the string as HTML content and iterate over all a tags and replace it with the corresponding link(by getting href attribute).

let html = `<a class="test" href="test.com" title="test">`;

// create a temporary div element
let tempDiv = document.createElement('div');
// set html content as your string
tempDiv.innerHTML = html;

// get all a tags and iterate
tempDiv.querySelectorAll('a').forEach(ele => {
  // replace element with corresponding link
  ele.replaceWith(ele.getAttribute('href')) // or ele.href
})

// get html content of temporary element
console.log(tempDiv.innerHTML)

Or alternately you can use DOMParser for parsing html content.

let html = `<a class="test" href="test.com" title="test">`;

// parser
let parser = new DOMParser();
// parse the string which returs a document object
doc = parser.parseFromString(html, "text/html");


// get all a tags and iterate
doc.querySelectorAll('a').forEach(ele => {
  // replace element with corresponding link
  ele.replaceWith(ele.getAttribute('href')) // or ele.href
})

// get html content from body
console.log(doc.body.innerHTML)

UPDATE : With regex you can extract and replace the a tag in the following method(not prefered).

var str = '<a class="test" href="test.com" title="test">';

console.log(str.replace(/<a[^>]*href="([^"]+)"[^>]*>(?:.*?<\/a>)?/g, '$1'));


var str1 = '<a class="test" href="test.com" title="test">abc</a>';

console.log(str1.replace(/<a[^>]*href="([^"]+)"[^>]*>(?:.*?<\/a>)?/g, '$1'));

Reference : Using regular expressions to parse HTML: why not?

How to replace HTML link with text link?

2 Answers2