JavaScript regex: Find a tag and get some attribute values

Question

i need to capture a html tag by class and some attribute value.

I've resolved the first part, capturing the tag by class (the querySelector should be something like: 'input.hashtag'):

<input type="text" value="#tag3" notified="true" class="label-primary hashtag">

So, im using this regex:

/(?=<input[^>]+(?=[\s+class=\"]hashtag[\s+\"]).+)([^>]+>)/g

You can checkout the test here https://regex101.com/r/zY4sH9/6

What i need is to capture also the attribute values: value and nofified, to finally get:

match1 <input type="text" value="#tag3" notified="true" class="label-primary hashtag">
match2 #tag
match3 true

Cause it will be mixed with some noisy code and parsers like jquery cant match properly... :( — Carlos
– Carlos, Commented Jan 25, 2016 at 14:46

Josh Crozier · Accepted Answer · 2016-01-25 15:51:30Z

You said that you're already using the .querySelector() method, therefore I would suggest avoiding regular expressions and using the native DOM methods.

var element = document.querySelector('input.hashtag'),
    value = element.value,
    notified = element.getAttribute('notified');

Similarly, if you want to select an input element that has a .hashtag class and value/notified attribute, then you could simply use two attribute selectors input.hashtag[value][notified]:

var element = document.querySelector('input.hashtag[value][notified]'),
    value = element.value,
    notified = element.getAttribute('notified');

However, if you need to use regular expressions, the following would capture the value and notified attribute's value regardless of order (since positive lookaheads are being used):

/(<input(?=[^>]*[\s+class=\"]hashtag[\s+\"])(?=[^>]*value=\"([^"]+)\")(?=[^>]*?notified=\"([^"]+)\")[^>]*\>)/

Updated Example

I just built off of your existing expression, so I don't need to explain the first part.

(?=[^>]*value=\"([^"]+)\") - Positive lookahead with a capturing group to match the value attribute's value after zero or more non-> characters.
(?=[^>]*?notified=\"([^"]+)\") - Positive lookahead with a capturing group to match the notified attribute's value after zero or more non-> characters.

Capturing groups:

Group 1 - <input type="text" value="#tag3" notified="true" class="label-primary hashtag">

Group 2 - #tag3

Group 3 - true

Lajos Arpad · Accepted Answer · 2016-01-25 14:50:40Z

0

.classname is a class selector, [propertyname=value] is a value selector, so you can do something like:

document.querySelectorAll('input.hashtag[notified=true]')

answered Jan 25, 2016 at 14:50

Lajos Arpad

80.4k42 gold badges123 silver badges234 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:44:54Z

0

Josh solved my question, and this is why:

var reg = /(<input(?=[^>]*[\s+class=\"]hashtag[\s+\"])(?=[^>]*value=\"([^"]+)\")(?=[^>]*?notified=\"([^"]+)\")[^>]*\>)/gi;

string.replace(reg, '[$2]($3)');

// prints [#tag3](true)

Thanks mate!

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Jan 25, 2016 at 15:36

Carlos

131 silver badge3 bronze badges

Collectives™ on Stack Overflow

JavaScript regex: Find a tag and get some attribute values

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related