Как использовать переменную внутри Regex?

1

У меня есть эта строка в моем цикле:

var regex1 = new RegExp('' + myClass + '[:*].*');
var rule1 = string.match(regex1)

Где "строка" - это строка селекторов классов, например: .hb-border-top:before,.hb-border-left

и "myClass" - это класс: .hb-border-top

Когда я циклически перебираю строки, мне нужно сопоставить строки, в которых есть "myClass", в том числе: before и: hover, но не включая такие вещи, как hb-border-top2.

Моя идея для этого регулярного выражения состоит в том, чтобы соответствовать hb-border-top а затем :* для соответствия ни одному, ни другому столбцу, а затем остальной строке.

Мне нужно сопоставить:

.hb-fill-top::before.hb-fill-top:hover::before.hb-fill-top.hb-fill-top:hover

но вышеприведенные возвраты:

.hb-fill-top::before.hb-fill-top:hover::before.hb-fill-top:hover

и не возвращает .hb-fill-top.

Таким образом, он должен соответствовать .hb-fill-top, а затем все, что следует, пока оно начинается :

РЕДАКТИРОВАТЬ:

Рисунок ниже: мои строки - это содержимое {selectorText}. Строка - это либо один класс, либо класс с псевдоэлементом, либо правило с несколькими кланами в нем, разделенное запятыми.

каждая строка, содержащая только .hb-fill-top ТОЛЬКО или .hb-fill-top: + что-то (наведение, после и т.д.). Класс будет в переменной "myClass", поэтому моя проблема, поскольку я не могу быть слишком точной.

Изображение 174551

Теги:

3 ответа

1
Лучший ответ

Я понимаю, что вы хотите получить любое имя селектора CSS, которое содержит значение где-то внутри, и имеет EITHER : и 0+ символы до конца строки ИЛИ заканчиваются прямо там.

Затем, чтобы получить совпадения для значения .hb-fill-top вам нужно решение вроде

/\.hb-fill-top(?::.*)?$/

и следующий JS-код, чтобы все это работало:

var key = ".hb-fill-top";
var rx = RegExp(key.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + "(?::.*)?$");
var ss = ["something.hb-fill-top::before","something2.hb-fill-top:hover::before","something3.hb-fill-top",".hb-fill-top:hover",".hb-fill-top2:hover",".hb-fill-top-2:hover",".hb-fill-top-bg-br"];
var res = ss.filter(x => rx.test(x));
console.log(res);

Обратите внимание, что для .replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') . это особый метасимвол регулярного выражения, который соответствует любому символу char, но char break. См. Есть ли функция RegExp.escape в Javascript? ,

^ Соответствует началу строки.

(?::.*)?$ будет соответствовать:

  • (?::.*)?$ - необязательный (из - за последний ? Квантор, который соответствует 1 или 0 вхождений количественной подмаски) последовательности ((?:...)? является не-захватом группы) из
    • : - двоеточие
    • .* - любые символы 0+, кроме символов разрыва строки
  • $ - конец строки.
Поделиться
  • 0
    Я проверю это, когда вернусь с работы, спасибо за ответ. Как вы можете видеть в отредактированном вопросе, у меня есть список строк, которые я должен выбрать. Строка имеет значение 1 (выбрано) или 0 (пропущено) в зависимости от этого регулярного выражения. Таким образом, если строка соответствует «ключу» или «ключу» с указателем мыши, после элементов и т. Д., То она будет выбрана. Я создаю функцию, которая в основном берет всю мою таблицу стилей, циклически перебирает все правила и возвращает только те правила, которые применяются к классу, который я поместил в «ключ». Он должен возвращать все: hover,: before правила и другие цепочечные правила, которые каким-то образом включают «ключ».
  • 0
    Когда вы используете ^ чтобы отметить начало строки здесь: RegExp("^" + key.replace .... не значит ли это, что строка будет совпадать только если она начинается с "ключа"? Будет ли она работать, если "ключ" где-то в середине строки?
Показать ещё 8 комментариев
0

var regex1 = new RegExp('^\\${myClass}(:{1,2}\\w+)*$')

var passes = [
    '.hb-fill-top::before',
    '.hb-fill-top:hover::before',
    '.hb-fill-top',
    '.hb-fill-top:hover',
    '.hb-fill-top::before',
    '.hb-fill-top:hover::before',
    '.hb-fill-top:hover'
];

var fails = ['.hb-fill-top-bg-br'];

var myClass = '.hb-fill-top';
var regex = new RegExp('^\\${myClass}(:{1,2}\\w+)*$');

passes.forEach(p => console.log(regex.test(p)));
console.log('---');
fails.forEach(f => console.log(regex.test(f)));
Поделиться
  • 0
    Возвращает такие вещи, как .hb-fill-top-bg-br и он должен возвращать только hb-fill-top и hb-fill-top:[rest of the string]
  • 0
    Обновлено. Эта строка теперь терпит неудачу, и 7 в вашем посте проходят. Вы можете попробовать еще раз?
0 
var regex1 = new RegExp('\\' + myClass + '(?::[^\s]*)?');
var rule1 = string.match(regex1)

Это регулярное выражение выбирает мой класс и когда-нибудь, если он начинается с : и останавливается, когда он встречает пробельный символ.

См. Регулярное выражение в действии.

Обратите также внимание, что я добавил '\\' в начале. Это делается для того, чтобы избежать точки в вашем классеName. В противном случае это соответствовало бы чему-то другому, как

ahb-fill-top
.some-other-hb-fill-top

Также будьте осторожны .* Он может соответствовать чему-то еще после (я не знаю вашего набора строк). Возможно, вы захотите уточнить :{1,2}[\w-()]+ в последней группе. Так:

var regex1 = new RegExp('\\' + myClass + '(?::{1,2}[\w-()]+)?');
Поделиться
  • 0
    Это также возвращает такие вещи, как: .hb-fill-top-rev-bg и не выбирает остальную часть строки, которая следует после .hb-fill-top:
  • 0
    Да, это так, смотрите мое последнее редактирование :) Обязательно поподробнее уточните свой вопрос: например, добавьте регулярное выражение, которое вы не хотите сопоставлять. Тогда наши ответы наверняка будут более подходящими.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню