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:[email protected]" style="color:inherit;text-decoration:inherit">[email protected]</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 [email protected] , But I am getting the exact same string as a input string . can any one please help me with this ? Thanks in advance.

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:[email protected]" style="color:inherit;text-decoration:inherit">[email protected]</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 [email protected] , But I am getting the exact same string as a input string . can any one please help me with this ? Thanks in advance.

• javascript
• jquery
• html
• regex

• 3 Why don't you use $("a") selector and loop through the result list to get it's href attrib? – Bharadwaj Commented Jan 2, 2018 at 15:06
• 1 Smells of H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ. Do me a favour and add content:">" inside your a tag's style attribute. – ctwheels Commented Jan 2, 2018 at 15:25

4 Answers 4

Why are you trying to reinvent the wheel?

You are trying to parse the HTML string with a regex it will be a very plicated 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:[email protected]" style="color:inherit;text-decoration:inherit">[email protected]</a>';

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

Demo:

var str = '<a href="mailto:[email protected]" style="color:inherit;text-decoration:inherit">[email protected]</a>';

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

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

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.

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 acplish. 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="mailto:[email protected]">[email protected]</a>
<a href="mailto:[email protected]">[email protected]</a>

DOM in string

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

var s = `<a href="mailto:[email protected]">[email protected]</a>
<a href="mailto:[email protected]">[email protected]</a>`

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="mailto:[email protected]">[email protected]</a>
<a href="mailto:[email protected]">[email protected]</a>

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'>[email protected]</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.