CODEWITHSUNDEEP
javascriptregex
Hiero
Hiero

Reputation: 2205

Regex match HTML attributes names

I have the following element stored as a String:

<div class="some-class" id="my-id" data-theme="black">
   <strong data-animation="fade" disabled>Hello world!</strong>
</div>

I want to extract all the attributes names like this:

["class", "id", "data-theme", "data-animation", "disabled"]

This is what I tried to do, but I get also the values and dosent match the data-animation and disabled:

http://jsbin.com/hibebezibo/edit?js,console

EDIT:

Manged to get attributes using:

[\w-]+(?=\s*=\s*".*?")

But I still cant get the "disabled" prop.

Can someone explain me how to achieve this? Thanks!

Upvotes: 3

Views: 2064

Answers (2)

Mehmet TAŞ
Mehmet TAŞ

Reputation: 11

This works on even nested structure.

It returns element name and its attributes

\<([^\/\>"]+)\s{1,}([^"]+)=\"[^"]*\"

Test your own regex on https://regex101.com

Upvotes: 0

revo
revo

Reputation: 48761

Using below regex which benefits from a positive lookahead you are able to match attributes' names:

[ ][\w-]+(?=[^<]*>)

Note: Adding - to character class is a must.

javascript code:

const HtmlElement = `<div class="some-class" id="my-id" data-theme="black">
  <strong data-animation="fade" disabled>Hello world!</strong>
</div>`

console.log(HtmlElement.match(/ [\w-]+(?=[^<]*>)/g).map(function(element) {         
    return element.trimLeft();
}));

However it's not bulletproof as it can match words following a >. E.g:

<strong data-animation="fade" disabled>Hello world!></strong>

So it's recommended to accomplish such a task using DOM functionalities:

var html = document.createElement('div');
html.innerHTML = '<div class="some-class" id="my-id" xlink:href data-theme="black"><strong data-animation="fade" disabled>Hello world!</strong></div>';
var attrNodes = document.evaluate('//*/attribute::*', html, null, XPathResult.ANY_TYPE, null)

var nextAttrNode = attrNodes.iterateNext()
var arrAttrs = [];
while (nextAttrNode) {
  arrAttrs.push(nextAttrNode.name)
  nextAttrNode = attrNodes.iterateNext();
}
console.log(arrAttrs)

Upvotes: 4

Related Questions