This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The CSS.escape()
static method returns a DOMString
containing the escaped string passed as parameter, mostly for use as part of a CSS selector.
escapedStr = CSS.escape(str);
DOMString
to be escaped.CSS.escape(".foo#bar") // "\.foo\#bar" CSS.escape("()[]{}") // "\(\)\[\]\{\}" CSS.escape('--a') // "--a" CSS.escape(0) // "\30 ", the Unicode code point of '0' is 30 CSS.escape('\0') // "\ufffd", the Unicode REPLACEMENT CHARACTER
To escape a string for use as part of a selector, the escape()
method can be used:
var element = document.querySelector('#' + CSS.escape(id) + ' > img');
The escape()
method can also be used for escaping strings, although it escapes characters that don't strictly need to be escaped:
var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) The definition of 'CSS.escape()' in that specification. | Working Draft | Initial definition |
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 46.0 | 31 (31)[1] | No support | No support | No support |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | No support | 46.0 | 31.0 (31)[1] | No support | No support | No support | 46.0 |
[1] Minor changes has been made in Firefox 32, to match the spec and the evolution of the CSS syntax. The identifier now can begins with '--'
and the second dash must not be escaped. Also vendor identifier are no more escaped.
CSS
interface where this static method resides.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape