HTMLHint: Parenthesis and asterisk trigger parsing errors

Angular 2 introduces a new syntax for attributes which can lead to this :

<li *ng-for="#item of collection">
  <button (click)="action(item)">Do something</button>
</li>

This is plain valid HTML but it triggers those 2 errors :

Special characters must be escaped
Tag must be paired

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 2
Comments: 15 (2 by maintainers)

Commits related to this issue

Change RegExp to allow special characters as attribute name Fixes #100 See W3C HTML specification: http://www.w3.org/TR/html-markup/syntax.html#syntax-attributes — committed to felixfbecker/HTMLHint by felixfbecker 8 years ago
Change RegExp to allow special characters as attribute name Fixes #100 See W3C HTML specification: http://www.w3.org/TR/html-markup/syntax.html#syntax-attributes — committed to felixfbecker/HTMLHint by felixfbecker 8 years ago
Change RegExp to allow special characters as attribute name Fixes #100 See W3C HTML specification: http://www.w3.org/TR/html-markup/syntax.html#syntax-attributes — committed to felixfbecker/HTMLHint by felixfbecker 8 years ago
attr name support all w3c defined characters fix #95,#100 — committed to htmlhint/HTMLHint by yaniswang 8 years ago

Most upvoted comments

Made a PR

felixfbecker on Apr 30, 2016

This is a serious bug… In a nutshell HTMLHint throwing errors on valid HTML. Can we please get a fix for this?

felixfbecker on Apr 30, 2016

Taken from the W3C HTML specification :

Attribute names must consist of one or more characters other than the space characters, U+0000 NULL, “”", “'”, “>”, “/”, “=”, the control characters, and any characters that are not defined by Unicode.

Following this rule, the code <div my*attribute="" *ng-for="" id$=""></div> is totally valid.

floo51 on Feb 5, 2016

HTMLHint only support HTML code, your angular code is template, no supported.

yaniswang on Nov 30, 2015

Instead of whitelisting characters here

/\s*([\w\-:]+)(?:\s*=\s*(?:(")([^"]*)"|(')([^']*)'|([^\s"'>]*)))?/

it should use an inverted character class that includes anything but "'>/=, NULL and whitespace:

/\s*([^"'>/=\0\s]+)(?:\s*=\s*(?:(")([^"]*)"|(')([^']*)'|([^\s"'>]*)))?/

Element tag names are not affected (see W3C)

felixfbecker on Apr 30, 2016

Hi @yaniswang ,

The issue is with the regular expression at: https://github.com/yaniswang/HTMLHint/blob/master/src/htmlparser.js#L36-L38

If we could make them unicode aware, we would solve the issue.

There are already projects working with regular expression and unicode like https://github.com/slevithan/xregexp

What do you think about this approach?

david-gang on Mar 1, 2016