Регулярка для поиска стилей конкретного селектора

Question

Всем привет! Прошу помощи.

У меня есть регулярка для поиска содержимого стилей между фигурными скобками в CSS строке.

const re = /{([^}]+)}/

У меня есть CSS строка типа.

Пример: [data-style="29c"]:hover {} [data-style="29c"]:focus {} [data-style="29c"] {}

Так как селектор динамический, я пытаюсь получить стили конкретного селектора так:

const selector = getSelector() // допустим [data-style="29c"] 

const re = new RegExp(selector + '{([^}]+)}')

Но получаю ошибку: Range out of order in character class

Я пробовал экранировать круглые скобки, результат тот же.

Очень прошу помощи.

Answer 1

let css = `
  [data-style="29c"]:hover { color: red }
  [data-style="29c"]:focus {}
  [data-style="29c"]{
    display: block;
    color: green;
  }
`;
let selector = '[data-style="29c"]';

// Взято осюда https://stackoverflow.com/a/6969486/11929476
function escapeRegExp(string){
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

let selectorForRegexp = escapeRegExp(selector);

let regexp = new RegExp( selectorForRegexp + '[^{]*\\{([^}]*)\\}', 'gm' );

console.log( 'regexp:', regexp );

let result = [];
let matched;
while( matched = regexp.exec(css) ){
  result.push( matched[1].replace(/\s+/g,' ').trim() );
}

console.log(result);

Если нужно получать только точное совпадение по селектору, без :hover и прочих, то строчка создания регулярки будет такой:

let regexp = new RegExp( selectorForRegexp + '\\{([^}]*)\\}', 'gm' );

БЛОГ НА HUSL

Регулярка для поиска стилей конкретного селектора

Ответы (1 шт):