attribute selector ignores attributes with dashes in their name (e.g., data-* attributes)

[rodw]

Given an HTML snippet such as

<span id="eg" foo="bar" data-foo="bar">something</span>

The selector span[foo] works as expected, returning the span element with the id eg.

But no variation of span[data-foo] seems to do the trick. It always selects an empty array.

More generally, any attribute name containing a dash character (-) is not recognized as an attribute selector by node-soupselect. Although I can't find a definitive reference that states attribute names can contain hyphens, they are all over HTML5 and this is contrary to the behavior of CSS on any browser I've tested. (I.e., a selector like:

span[data-foo] { background: green; }

will accurately select the element.)

I haven't tested the change extensively, but I think this is easily addressed by changing line 22 of soupselect.js from:

var attrSelectRe = /^(\w+)?\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/;

to

var attrSelectRe = /^(\w+)?\[([\w-]+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/;
// the change is here---------^--^^

since \w matches letters, numbers or underscores ([a-zA-Z0-9_]) but not the dash character (-). Changing the second instance of (\w+) to ([\w-]+) adds dashes into the mix.

It may be sensible to do the same thing to the first instance of \w in that pattern so that tag names can contain hyphens as well.

I can provide pull request for this if desired.

[sbrodehl]

Seems like id's containing a dash character are broken, too.
Looks like this project is dead, anyway.