Skip to content

Instantly share code, notes, and snippets.

@mathiasbynens
Forked from 140bytes/LICENSE.txt
Created June 11, 2011 08:56
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mathiasbynens/1020383 to your computer and use it in GitHub Desktop.
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)
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>
@mathiasbynens
Copy link
Author

@tsaniel
Copy link

tsaniel commented Aug 6, 2011

Could it be replaced by function(v){return!/[ \t\n\f\r"'=<>]/.test(v)}` ?

@mathiasbynens
Copy link
Author

@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!

@maettig
Copy link

maettig commented Nov 11, 2011

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"'=<>].

@tsaniel
Copy link

tsaniel commented Nov 11, 2011

@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/

@maettig
Copy link

maettig commented Nov 11, 2011

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.

@tsaniel
Copy link

tsaniel commented Nov 12, 2011

You could just rewrite the code and test here and see what went wrong http://jsfiddle.net/mathias/cYKrV/.

@maettig
Copy link

maettig commented Nov 12, 2011

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.

@tsaniel
Copy link

tsaniel commented Nov 12, 2011

I agree that those characters are unusual, however, replacing with the \s doesn't save many bytes, I think it's not worth it.

@maettig
Copy link

maettig commented Nov 12, 2011

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