Блог

Главная - Вопросы по программированию - Нужна помощь для поиска каждого свойства css строки/столбца из строки css таблицы-шаблона-столбцов с помощью регулярного выражения

Нужна помощь для поиска каждого свойства css строки/столбца из строки css таблицы-шаблона-столбцов с помощью регулярного выражения

#javascript #regex #match

Вопрос:

Я создаю приложение, в котором мне нужен CSS-анализатор строк и столбцов. По этой причине мне нужно извлечь данные CSS с помощью регулярного выражения и вернуть массив.

Строка Css является: 1fr minmax(75px, auto) fit-content(40%) repeat(3, 200px) 200px repeat(auto-fill, 100px) 300px repeat(auto-fill, minmax(75px, auto))

Необходимость вывода массива: ["1fr", "minmax(75px, auto)", "fit-content(40%)", "repeat(3, 200px)", "200px", "repeat(auto-fill, 100px)", "300px", "repeat(auto-fill, minmax(75px, auto))"]

Я пытался:

 const getTotalColumnOrRowArray = (css_string) => {
    // abc123 ||OR|| abc-abc(abc123, abc123) ||OR|| abc
    let arr = css_string.match(/d [a-zA-ZS] |([a-zA-Z-S] ([a-zA-Z-dS] , [a-zA-Z-dS] ))|[a-zA-ZS] /g);
    return arr;
};

Но он не может вернуть "repeat(auto-fill, minmax(75px, auto))" это значение.

Комментарии:

1. Если вложенность круглой скобки составляет всего 1 уровень [^s()] (?:([^s()] (?:([^()] ))?(?:, *[^s()] (?:([^()] ))?)*))? , см. regex101.com/r/Ny9x75/1

2. Спасибо, @Thefourthbird. Это решает мою проблему.

3. @JakirHossen любезно отметьте принятый ответ, если он решит вашу проблему.

Ответ №1:

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

 [^s()] (?:([^s()] (?:([^()] ))?(?:, *[^s()] (?:([^()] ))?)*))?

По частям

  • [^s()] Сопоставьте 1 раз любой символ, кроме ( ) символа пробела или символа пробела
  • (?: Группа без захвата
    • ( Матч (
    • [^s()] Сопоставьте 1 раз любой символ, кроме ( ) символа пробела или символа пробела
    • (?: Группа без захвата
      • ([^()] ) Сопоставьте ( 1 раз любой символ, кроме ( ) символа пробела или символа и совпадения )
    • )? Закройте группу и сделайте ее необязательной
    • (?: Группа без захвата
      • , *[^s()] Сопоставьте запятую, необязательные пробелы и 1 раз любой символ, кроме ( ) символа пробела или символа пробела
      • (?:([^()] ))? Сопоставьте необязательную деталь со скобками, как и раньше
    • )* Закройте группу и при необходимости повторите
    • ) Матч )
  • )? Закройте группу и сделайте ее необязательной

Демонстрация регулярных выражений

 const s = "1fr minmax(75px, auto) fit-content(40%) repeat(3, 200px) 200px repeat(auto-fill, 100px) 300px repeat(auto-fill, minmax(75px, auto))";
const regex = /[^s()] (?:([^s()] (?:([^()] ))?(?:, *[^s()] (?:([^()] ))?)*))?/g;
let result = Array.from(s.matchAll(regex), m => m[0])
console.log(result);
Метки: