Extract inner text from anchor tag string using a regular expression in JavaScript

Question

I am new to angular js . I have regex which gets all the anchor tags. My reg ex is

/<a[^>]*>([^<]+)<\/a>/g

And I am using the match function here like ,

var str =  '<a href="mailto:abc.jagadale@gmail.com" style="color:inherit;text-decoration:inherit">abc.jagadale@gmail.com</a>'

So Now I am using the code like

var value = str.match(/<a[^>]*>([^<]+)<\/a>/g);

So, Here I am expecting the output to be abc.jagadale@gmail.com , But I am getting the exact same string as a input string . can any one please help me with this ? Thanks in advance.

Answer 1

Why are you trying to reinvent the wheel?

You are trying to parse the HTML string with a regex it will be a very complicated task, just use DOM or jQuery to get the links contents, they are made for this.

• Put the HTML string as the HTML of a jQuery/DOM element.

• Then fetch this created DOM element to get all the a elements inside it and return their contents in an array.

This is how should be your code:

var str = '<a href="mailto:abc.jagadale@gmail.com" style="color:inherit;text-decoration:inherit">abc.jagadale@gmail.com</a>';

var results = [];
$("<div></div>").html(str).find("a").each(function(l) {
  results.push($(this).text());
});

Demo:

var str = '<a href="mailto:abc.jagadale@gmail.com" style="color:inherit;text-decoration:inherit">abc.jagadale@gmail.com</a>';

var results = [];
$("<div></div>").html(str).find("a").each(function(l) {
  results.push($(this).text());
});
console.log(results);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

You need to capture the group inside the anchor tags. The regular expression already matches the inner group ([^<]+) But, when matching there are different ways to extract that inner text.

When using the Match function it will return an array of matched elements, the first one, will match the whole regular expression and the following elements will match the included groups in the regular expression.

Try this:

var reg = /<a[^>]*>([^<]+)<\/a>/g

reg.exec(str)[1]

Also the match function will return an array only if the g flag is not present.

Check https://javascript.info/regexp-groups for further documentation.

Answer 3

Brief

Don't use regex for this. Regex is a great tool, don't get me wrong, but it's not what you're looking for. Regex cannot properly parse HTML and should only be used to do so if it's a limited, known set of HTML.

Try, for example, adding content:">" to your style attribute. You'll see your pattern now fails or gives you an incorrect result. I don't like to use this quote all the time, but I think it's necessary to use it in this case:

Some people, when confronted with a problem, think "I know, I'll use regular expressions." Now they have two problems.

Use builtin functions. jQuery makes this super easy to accomplish. See my Code section for a demonstration. It's way more legible than any regex variant.

---

Code

DOM from page

The following snippet gets all anchors on the actual page.

$("a").each(function() {
  console.log($(this).text())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="mailto:abc.jagadale@gmail.com">abc.jagadale@gmail.com</a>
<a href="mailto:abc2.jagadale@gmail.com">abc2.jagadale@gmail.com</a>

DOM in string

The following snippet gets all anchors in the string (converted to DOM element)

var s = `<a href="mailto:email3@domain.com">email3@domain.com</a>
<a href="mailto:email4@domain.com">email4@domain.com</a>`

$("<div></div>").html(s).find("a").each(function() {
  console.log($(this).text())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="mailto:email1@domain.com">email1@domain.com</a>
<a href="mailto:email2@domain.com">email2@domain.com</a>

Answer 4

Given the use case of parsing a string, instead of having an actual DOM to work with, it does seem like regex is the way to go, unless you want to load the HTML into a document fragment and parse that.

One way to get all of your matches is to make use of split:

var htmlstr = "<p><a href='url'>asdf@bsdf.com</a></p>"

var matches = htmlstr.split(/<a.+?>([A-Za-z.@]+)<\/a>/).filter((t, i) => i % 2)

Using a regex with split returns all of the matches along with the text around them, then filtering by index % 2 will pare it down to just the regex matches.