Как разобрать и извлечь CSS-селекторы в виде строк? - PullRequest
Новая
       16

Как разобрать и извлечь CSS-селекторы в виде строк?

0 голосов
/ 29 ноября 2011

Какой самый простой способ извлечь селекторы CSS в виде строк?

Учитывая это как ввод: 

#article{width:690px;overflow:hidden}
#article h2:first-child a{text-decoration:none}
#works .project p:last-child{margin-top:20px;font-size:13px}
#works .project img, #works .info img{width:680px;min-height:400px;border:1px dotted #ccc;margin-bottom:40px}

Как я могу получить список селекторов, таких как этот: 

var selectors = ['#article','#article h2:first-child a','#works .project p:last-child','#works .project img']

Ответы [ 3 ]

2 голосов
/ 29 ноября 2011

Определить "ввод. Если он находится в таблице стилей, которая была проанализирована браузером, вы можете использовать API-интерфейсы стиля 2 * DOM уровня 2 *, чтобы извлечь правила CSS из таблицы стилей и запросить их для селекторов (хотя вывозможно, придется разделять запятые самостоятельно).

Если он не анализируется браузером, а предоставляется как ввод с помощью какого-либо другого механизма, вы можете использовать JSCSSP (синтаксический анализатор CSS)в JavaScript) для разбора ввода.

1 голос
/ 02 декабря 2011

Вот решение, которое я выбрал:

  1. Замените фигурные скобки, включая их содержимое, некоторыми уникальными символами. Отсюда взято Regex Сопоставление селекторов CSS с Javascript RegExp
  2. Разделить список на этих уникальных персонажей.

Просто хотел опубликовать это здесь для документации: 

var css = "#article[type=x]{width:690px;overflow:hidden}#article h2:first-child a{text-decoration:none}#works .project p:last-child{margin-top:20px;font-size:13px}#works .project img, #works .info img{width:680px;min-height:400px;border:1px dotted #ccc;margin-bottom:40px}"
var found = css.replace(/{([^}]*)}/gm,"~~~").split("~~~");

document.write(found);
0 голосов
/ 29 ноября 2011

ВНИМАНИЕ: Waporcode, я не проверял это, но я использовал что-то подобное раньше ... 

    document.styleSheets[0].cssRules[0].selectorText

Это то, что вы ищете?

...