项目原始demo,不改动
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.

пре 4 година
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. # cssesc [![Build status](https://travis-ci.org/mathiasbynens/cssesc.png?branch=master)](https://travis-ci.org/mathiasbynens/cssesc) [![Dependency status](https://gemnasium.com/mathiasbynens/cssesc.png)](https://gemnasium.com/mathiasbynens/cssesc)
  2. A JavaScript library for escaping CSS strings and identifiers while generating the shortest possible ASCII-only output.
  3. This is a JavaScript library for [escaping text for use in CSS strings or identifiers](http://mathiasbynens.be/notes/css-escapes) while generating the shortest possible valid ASCII-only output. [Here’s an online demo.](http://mothereff.in/css-escapes)
  4. Feel free to fork if you see possible improvements!
  5. ## Installation
  6. Via [Bower](http://bower.io/):
  7. ```bash
  8. bower install cssesc
  9. ```
  10. Via [Component](https://github.com/component/component):
  11. ```bash
  12. component install mathiasbynens/cssesc
  13. ```
  14. Via [npm](http://npmjs.org/):
  15. ```bash
  16. npm install cssesc
  17. ```
  18. In a browser:
  19. ```html
  20. <script src="cssesc.js"></script>
  21. ```
  22. In [Node.js](http://nodejs.org/) and [RingoJS](http://ringojs.org/):
  23. ```js
  24. var cssesc = require('cssesc');
  25. ```
  26. In [Narwhal](http://narwhaljs.org/):
  27. ```js
  28. var cssesc = require('cssesc').cssesc;
  29. ```
  30. In [Rhino](http://www.mozilla.org/rhino/):
  31. ```js
  32. load('cssesc.js');
  33. ```
  34. Using an AMD loader like [RequireJS](http://requirejs.org/):
  35. ```js
  36. require(
  37. {
  38. 'paths': {
  39. 'cssesc': 'path/to/cssesc'
  40. }
  41. },
  42. ['cssesc'],
  43. function(cssesc) {
  44. console.log(cssesc);
  45. }
  46. );
  47. ```
  48. ## API
  49. ### `cssesc(value, options)`
  50. This function takes a value and returns an escaped version of the value where any characters that are not printable ASCII symbols are escaped using the shortest possible (but valid) [escape sequences for use in CSS strings or identifiers](http://mathiasbynens.be/notes/css-escapes).
  51. ```js
  52. cssesc('Ich ♥ Bücher');
  53. // → 'Ich \\2665 B\\FC cher'
  54. cssesc('foo 𝌆 bar');
  55. // → 'foo \\1D306 bar'
  56. ```
  57. By default, `cssesc` returns a string that can be used as part of a CSS string. If the target is a CSS identifier rather than a CSS string, use the `isIdentifier: true` setting (see below).
  58. The optional `options` argument accepts an object with the following options:
  59. #### `isIdentifier`
  60. The default value for the `isIdentifier` option is `false`. This means that the input text will be escaped for use in a CSS string literal. If you want to use the result as a CSS identifier instead (in a selector, for example), set this option to `true`.
  61. ```js
  62. cssesc('123a2b');
  63. // → '123a2b'
  64. cssesc('123a2b', {
  65. 'isIdentifier': true
  66. });
  67. // → '\\31 23a2b'
  68. ```
  69. #### `quotes`
  70. The default value for the `quotes` option is `'single'`. This means that any occurences of `'` in the input text will be escaped as `\'`, so that the output can be used in a CSS string literal wrapped in single quotes.
  71. ```js
  72. cssesc('Lorem ipsum "dolor" sit \'amet\' etc.');
  73. // → 'Lorem ipsum "dolor" sit \\\'amet\\\' etc.'
  74. // → "Lorem ipsum \"dolor\" sit \\'amet\\' etc."
  75. cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', {
  76. 'quotes': 'single'
  77. });
  78. // → 'Lorem ipsum "dolor" sit \\\'amet\\\' etc.'
  79. // → "Lorem ipsum \"dolor\" sit \\'amet\\' etc."
  80. ```
  81. If you want to use the output as part of a CSS string literal wrapped in double quotes, set the `quotes` option to `'double'`.
  82. ```js
  83. cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', {
  84. 'quotes': 'double'
  85. });
  86. // → 'Lorem ipsum \\"dolor\\" sit \'amet\' etc.'
  87. // → "Lorem ipsum \\\"dolor\\\" sit 'amet' etc."
  88. ```
  89. #### `wrap`
  90. The `wrap` option takes a boolean value (`true` or `false`), and defaults to `false` (disabled). When enabled, the output will be a valid CSS string literal wrapped in quotes. The type of quotes can be specified through the `quotes` setting.
  91. ```js
  92. cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', {
  93. 'quotes': 'single',
  94. 'wrap': true
  95. });
  96. // → '\'Lorem ipsum "dolor" sit \\\'amet\\\' etc.\''
  97. // → "\'Lorem ipsum \"dolor\" sit \\\'amet\\\' etc.\'"
  98. cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', {
  99. 'quotes': 'double',
  100. 'wrap': true
  101. });
  102. // → '"Lorem ipsum \\"dolor\\" sit \'amet\' etc."'
  103. // → "\"Lorem ipsum \\\"dolor\\\" sit \'amet\' etc.\""
  104. ```
  105. #### `escapeEverything`
  106. The `escapeEverything` option takes a boolean value (`true` or `false`), and defaults to `false` (disabled). When enabled, all the symbols in the output will be escaped, even printable ASCII symbols.
  107. ```js
  108. cssesc('lolwat"foo\'bar', {
  109. 'escapeEverything': true
  110. });
  111. // → '\\6C\\6F\\6C\\77\\61\\74\\"\\66\\6F\\6F\\\'\\62\\61\\72'
  112. // → "\\6C\\6F\\6C\\77\\61\\74\\\"\\66\\6F\\6F\\'\\62\\61\\72"
  113. ```
  114. ### `cssesc.version`
  115. A string representing the semantic version number.
  116. ### Using the `cssesc` binary
  117. To use the `cssesc` binary in your shell, simply install cssesc globally using npm:
  118. ```bash
  119. npm install -g cssesc
  120. ```
  121. After that you will be able to escape text for use in CSS strings or identifiers from the command line:
  122. ```bash
  123. $ cssesc 'föo ♥ bår 𝌆 baz'
  124. f\F6o \2665 b\E5r \1D306 baz
  125. ```
  126. If the output needs to be a CSS identifier rather than part of a string literal, use the `-i`/`--identifier` option:
  127. ```bash
  128. $ cssesc --identifier 'föo ♥ bår 𝌆 baz'
  129. f\F6o\ \2665\ b\E5r\ \1D306\ baz
  130. ```
  131. See `cssesc --help` for the full list of options.
  132. ## Support
  133. This library has been tested in at least Chrome 28-30, Firefox 3-23, Safari 4-6, Opera 10-15, IE 6-10, Node.js v0.10.0, Narwhal 0.3.2, RingoJS 0.8-0.9, PhantomJS 1.9.0, and Rhino 1.7RC4.
  134. ## Unit tests & code coverage
  135. After cloning this repository, run `npm install` to install the dependencies needed for development and testing. You may want to install Istanbul _globally_ using `npm install istanbul -g`.
  136. Once that’s done, you can run the unit tests in Node using `npm test` or `node tests/tests.js`. To run the tests in Rhino, Ringo, Narwhal, and web browsers as well, use `grunt test`.
  137. To generate [the code coverage report](http://rawgithub.com/mathiasbynens/cssesc/master/coverage/cssesc/cssesc.js.html), use `grunt cover`.
  138. ## Author
  139. | [![twitter/mathias](http://gravatar.com/avatar/24e08a9ea84deb17ae121074d0f17125?s=70)](http://twitter.com/mathias "Follow @mathias on Twitter") |
  140. |---|
  141. | [Mathias Bynens](http://mathiasbynens.be/) |
  142. ## License
  143. This library is available under the [MIT](http://mths.be/mit) license.