3

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!

Hiero
  • 2,182
  • 7
  • 28
  • 47
  • 1
    You can use lookaheads `[\w-]+(?=\s*=\s*".*?")` – revo Apr 07 '17 at 07:40
  • It dosent match disabled and data-animation, just animation – Hiero Apr 07 '17 at 07:41
  • 1
    Recently, I have asked a similar [question](http://stackoverflow.com/questions/43185510/regex-match-fails-on-string-with-double-quotes), so I get a [link](http://stackoverflow.com/a/1732454/2289430) in comments that change my mind. – ibubi Apr 07 '17 at 07:43

2 Answers2

4

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)
Graham
  • 7,431
  • 18
  • 59
  • 84
revo
  • 47,783
  • 14
  • 74
  • 117
  • Thanks @revo, but I notice that disabled is not matched, also in case I use svg xlink:href, just xlink is matched – Hiero Apr 07 '17 at 07:45
  • actually, i dont care about empty attributes, but I really need xlink:href – Hiero Apr 07 '17 at 08:01
0

This works on even nested structure.

It returns element name and its attributes

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

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

Mehmet TAŞ
  • 11
  • 3