wp.html.attrs( string ) JS method has issue with attributes with dashes

[seamusleahy]

Before I start, the HTML Javascript helpers are marked as experimental.

In wp-includes/js/shortcode.js, the wp.html.attrs method mis-parses attributes containing dashes. Instead the name, equal, and value all end up as the key.

wp.html.attrs( 'src="hi.jpg" selected data-foo="bar"' );

Results in:

{
  "src": "hi.jpg",
  "selected": "", 
  "data-foo=\"bar\"": ""
}

[bananastalktome]

It looks like the regex ((\w+)\s*=\s*"([^"]*)"(?:\s|$)|(\w+)\s*=\s*\'([^\']*)\'(?:\s|$)|(\w+)\s*=\s*([^\s\'"]+)(?:\s|$)|"([^"]*)"(?:\s|$)|(\S+)(?:\s|$)) uses \w in several places which checks only Letters, Numbers, & Underscores, but not dashes. In so-basic-it-almost-wasnt-testing testing, changing the \w to [\w-] seemed to resolve the issue.

Since the regex is shared with the wp-includes\shortcodes.php function shortcode_parse_atts(), I don't know if any changes would be needed there as well.

[seamusleahy]

adds base function for both shortcodes and html

[seamusleahy]

Since I don't want to change the way shortcode attributes are parsed, I added a general purpose function based on wp.shortcode.attrs to parse both by passing an options parameter. The options parameter is an object with a flag dashesInNames to allow dashes in the attribute names.

[miqrogroove]

Reference ​https://codex.wordpress.org/Shortcode_API#Attributes