React/jsx 元素的 className 中的正则表达式匹配类

Question

以下是我的 React 组件的片段

<div className="grid lg:grid-cols-2 xl:grid-cols-1 lg:gap-x-5">
  <article className={`${index > 0 ? 'border-t lg:border-t-0 xl:border-t border-gray-300/70' : ''} py-8 sm:flex xl:items-center lg:flex-col xl:flex-row`}>
    ...
  </article>
</div>

我需要获取组件中的所有类。我能够将 className="grid lg:grid-cols-2 xl:grid-cols-1 lg:gap-x-5" 中的类与以下正则表达式匹配：

/(?<=className=")(.*)(?=")/g

但是，我不知道如何为

匹配类

className={`${index > 0 ? 'border-t lg:border-t-0 xl:border-t border-gray-300/70' : 'text-gray-900'} py-8 sm:flex xl:items-center lg:flex-col xl:flex-row`}

比如我需要匹配上例中的"border-t lg:border-t-0 xl:border-t border-gray-300/70 text-gray-900 py-8 sm:flex xl:items-center lg:flex-col xl:flex-row"

Answer 1

您可以试试这 3 个正则表达式的组合：

脚本：

function myFunction() {
  text = "<div className=\"grid lg:grid-cols-2 xl:grid-cols-1 lg:gap-x-5\">\
            <article className={`${index > 0 ? 'border-t lg:border-t-0 xl:border-t border-gray-300/70' : 'text-gray-900'} py-8 sm:flex xl:items-center lg:flex-col xl:flex-row` }\
              ...\
            </article>\
          </div>";

  console.log(text.match(/(?<=\?\s?')([^']*)(?='(\s?:|\s?}))|(?<=}\s?)([^`]*)(?=`\s?})/g).join(' '))
}

输出：

注：

如果您只需要文章标签内的类名，您可能需要在下面的正则表达式之前添加 article className 检查，因为下面的正则表达式可能会在单引号之间选择其他类 ( '').

React/jsx 元素的 className 中的正则表达式匹配类

Regex matching classes in className of a React/jsx element

javascript

regex

jsx

reactjs

脚本：

输出：

注：

React/jsx 元素的 className 中的正则表达式匹配 类

Regex matching classes in className of a React/jsx element

javascript

regex

jsx

reactjs

脚本：

输出：

注：

React/jsx 元素的 className 中的正则表达式匹配类