-
-
Save mathiasbynens/1020383 to your computer and use it in GitHub Desktop.
So, after cross-referencing these three different sections of the HTML | |
spec, we can finally conclude that a valid unquoted attribute value in | |
HTML is any string of text that is not the empty string and that doesn’t | |
contain spaces, tabs, line feeds, form feeds, carriage returns, ", ', `, | |
=, <, or >. | |
→ See http://mathiasbynens.be/notes/unquoted-attribute-values |
function(value) { | |
return /^[^ \t\n\f\r"'`=<>]+$/.test(value); | |
} |
function(v){return/^[^ \t\n\f\r"'`=<>]+$/.test(v)} |
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
Version 2, December 2004 | |
Copyright (C) 2011 Mathias Bynens <http://mathiasbynens.be/> | |
Everyone is permitted to copy and distribute verbatim or modified | |
copies of this license document, and changing it is allowed as long | |
as the name is changed. | |
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | |
0. You just DO WHAT THE FUCK YOU WANT TO. |
{ | |
"name": "unquotedHTMLAttributeValueValidator", | |
"description": "Check if a given string can be used as an unquoted attribute value in HTML.", | |
"keywords": [ | |
"html", | |
"attribute", | |
"attribute-values" | |
] | |
} |
<!DOCTYPE html> | |
<!-- Demo: http://mothereffingunquotedattributes.com/ --> | |
<title>Unquoted attribute value validator</title> | |
<input value="foo'bar" required autofocus> is <em>not</em> a valid unquoted attribute value. | |
<script> | |
var isUnquotable = function(v){return/^[^ \t\n\f\r"'`=<>]+$/.test(v)}, | |
el = document.getElementsByTagName('em')[0]; | |
document.getElementsByTagName('input')[0].oninput = function() { | |
el.style.display = isUnquotable(this.value) ? 'none' : 'inline'; | |
}; | |
</script> |
@tsaniel: Sadly, no — the empty string is not a valid unquoted attribute value in HTML, so test('')
should return false
.
The current snippet is this:
// 50 bytes
function(v){return/^[^ \t\n\f\r"'`=<>]+$/.test(v)}
Here are some alternatives but none of them are <50 bytes :(
// 51 bytes
function(v){return v&&!/[ \t\n\f\r"'`=<>]/.test(v)}
// 50 bytes, but doesn’t return a strict boolean value
function(v){return!/[ \t\n\f\r"'`=<>]/.test(v)&&v}
Here are some unit tests that may help while rewriting this: http://jsfiddle.net/mathias/cYKrV/ Let me know if you can find a way to make it pass all tests in <50 bytes!
According to the Perl documentation \s
is a shortcut for [ \f\n\r\t]
. And according to the Regular Expression Flavor Comparison it's the same in JavaScript (ECMA). So your [^ \t\n\f\r"'
=<>]can be replaced with
[^\s"'=<>]
.
@maettig: Unfortunately, we are in JavaScript instead of Perl, there are not many browsers which follow the ECMA standard.
Check this out. http://perfectionkills.com/whitespace-deviations/
I don't see the problem. All six basic characters are green in this chart. Except for the vertical tab in Konqueror. I consider this irrelevant (not Konqueror but the vertical tab). In fact this chart proves I'm right. \s
matches the 5 characters [ \f\n\r\t]
in all web browsers, the vertical tab in almost all browsers and more Unicode whitespace in modern browsers.
You could just rewrite the code and test here and see what went wrong http://jsfiddle.net/mathias/cYKrV/.
You are testing if your regular expression does not match certain whitespace characters. But according to the Whitespace deviations chart all these characters are whitespace characters, at least in modern browsers. If you ask me, I don't care about the higher whitespace characters. If they are matched with \s
it's fine. If they are not matched (because the JavaScript is run in an older browser) I don't care because almost nobody uses these characters.
I agree that those characters are unusual, however, replacing with the \s
doesn't save many bytes, I think it's not worth it.
It's true. If you want to stick with the specification where certain characters do not count as whitespace characters, you can not use \s
.
Could it be replaced by
function(v){return!/[ \t\n\f\r"'
=<>]/.test(v)}` ?