在前端开发中，CSS 选择器是不可或缺的一部分。而处理 CSS 选择器的核心就是将其解析为一个个 token。这时候，npm 包 css-selector-tokenizer 就派上用场了。
安装
在使用之前，需要先安装 css-selector-tokenizer，可以通过 npm 命令行安装：
npm install css-selector-tokenizer
使用方法
解析 CSS 选择器
首先，我们需要使用 parse 方法将 CSS 选择器解析为一个 token 数组：
const { parse } = require('css-selector-tokenizer');
const selector = 'body .container > p:nth-child(odd)';
const tokens = parse(selector);
console.log(tokens);输出结果为：
-- -------------------- ---- -------
-
----- ------------
------ -
-
----- -----------
------ -
- ----- ---------- ----- ------ --
- ----- ---------- ------ - - --
- ----- -------- ----- ----------- --
- ----- ---------- ------ - - --
- ----- ----------- --------- --- --
- ----- ---------- ------ - - --
-
----- ---------------
----- ------------
------ -- ----- --------- ------ ----- --
-
-
-
-
-生成 CSS 选择器
除了解析 CSS 选择器，css-selector-tokenizer 还可以生成 CSS 选择器，方法为 stringify：
-- -------------------- ---- -------
----- - --------- - - ----------------------------------
----- ------ - -
----- ------------
------ -
-
----- -----------
------ -
- ----- ---------- ----- ------ --
- ----- ---------- ------ - - --
- ----- -------- ----- ----------- --
- ----- ---------- ------ - - --
- ----- ----------- --------- --- --
- ----- ---------- ------ - - --
-
----- ---------------
----- ------------
------ -- ----- --------- ------ ----- --
-
-
-
-
--
----- -------- - ------------------
----------------------输出结果为：
'body .container > :nth-child(odd)'
操作 token
css-selector-tokenizer 还提供了一些操作 token 的方法，例如在指定位置插入、删除、替换 token 等。这里以 splice 方法为例，将选择器中的“container”替换成“wrapper”：
-- -------------------- ---- -------
----- - ------ ---------- ---- - - ----------------------------------
----- -------- - ----- ---------- - ------------------
----- ------ - ----------------
------------ ------ -- -
-- ---------- --- ------- -- --------- --- ------------ -
--------- - ----------
-
---
-------------------------------输出结果为：
'body .wrapper > :nth-child(odd)'
总结
通过本文的介绍，我们可以轻松掌握 css-selector-tokenizer 的基本用法，包括解析 CSS 选择器、生成 CSS 选择器以及操作 token 等。对于前端开发中对 CSS 选择器进行复杂操作的场景，此工具包将非常实用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46504