-
-
Save mathiasbynens/1020383 to your computer and use it in GitHub Desktop.
Quick and dirty way to check if a given string can be used as an unquoted attribute value in HTML. (50 bytes)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function(value) { | |
| return /^[^ \t\n\f\r"'`=<>]+$/.test(value); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function(v){return/^[^ \t\n\f\r"'`=<>]+$/.test(v)} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "unquotedHTMLAttributeValueValidator", | |
| "description": "Check if a given string can be used as an unquoted attribute value in HTML.", | |
| "keywords": [ | |
| "html", | |
| "attribute", | |
| "attribute-values" | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
\smatches 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.