Use Regex to get string from HTML tag attribute - JavaScript

Question

I am very new to Regex but I think it is the best way to do this. I really need to get the text from an HTML tag attribute to an array of strings to be able to work with. I have multiple <span> tags with an onclick attribute. It's the text from within the attribute that I need. I will give you an example.

<span class="ord" onclick="top.wiki_ord_klick('abstrakt','icke konkret, ogripbar')">abstrakt</span><br>

This is a span class with an onclick attribute. What I want to access is the words in top.wiki_ord_klick(...). I want them to be individually made strings and put into an array. The result would be

var result = ["abstrakt", "icke konkret, ogripbar"];

How can I do this?

Sorry for the inconvenience! I ment it like two strings, icke konkret and ogripbar should be only one string. I'll update the question. — soomro
– soomro, Commented Nov 14, 2016 at 19:08

Rick Hitchcock · Accepted Answer · 2016-11-14 19:19:21Z

2

The following uses match() with regular expression /'.+?'/. This matches everything between single quotes (including the quotes), and this returns the parameters as an array.

It then iterates through the array using map() to remove the single quotes.

var span = document.querySelector('span.ord'),  //get the <span> element
    click = span.onclick.toString(),            //get its inline click event as a string
    parms = click.match(/'.+?'/g);              //get an array of the onclick parameters

parms = parms.map(function(parm) {
  return parm.replace(/'/g, '');                //remove single quotes
});

console.log(parms);

<span class="ord" onclick="top.wiki_ord_klick('abstrakt', 'icke konkret, ogripbar')">abstrakt</span>

edited Nov 14, 2016 at 19:19

answered Nov 14, 2016 at 18:57

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use Regex to get string from HTML tag attribute - JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related