将正则表达式匹配到字符串

Question

我要输入文字，并希望获取所有出现在数组中的内容，例如：

[
    ['{{ $slot }}'],
    ['{{$example }}'],
    ['{{ $Product2}}'],
    ['{{$category1 }}']
]

我尝试了以下示例：

const text = "<h1>Hello world!</h1> <h2>What is {{ $slot }} Ipsum?</h2> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to {{$example }}make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially {{$category1 }} unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more {{ $Product2}} recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>&nbsp;</p><p>&nbsp;</p>"

let data = text.match('/{{\s*\$\w+\s*}}')

console.log(data)

您会看到我得到null作为结果。

任何建议为什么？

感谢您的答复！

Answer 1

在JavaScript中，regexp literal与string literal不同，因此match的参数必须为/{{\s*\$\w+\s*}}/而不是'{{\s*\$\w+\s*}}'或{{1} }。请注意，它周围没有引号。因此，尝试：

'/{{\s*\$\w+\s*}}'

哪个给：

const text = "<h1>Hello world!</h1> <h2>What is {{ $slot }} Ipsum?</h2> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to {{$example }}make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially {{$category1 }} unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more {{ $Product2}} recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>&nbsp;</p><p>&nbsp;</p>"
let data = /{{\s*\$\w+\s*}}/g

请注意，我在匹配的正则表达式的最后斜杠后添加了>>> data Array(4) [ "{{ $slot }}", "{{ $example }}", "{{ $category1 }}", "{{ $Product2}}" ] 标志，以返回所有匹配的字符串，而不仅仅是第一个。

正如其他人所注意到的那样，转义大括号也是一种很好的做法，否则当它们包含数字时会遇到麻烦，因为这对正则表达式具有特殊含义。

Answer 2

尝试不使用第一个斜杠

'{{\ s * \ $ \ w + \ s *}}'

regex101 example

第1场

  

完全匹配35-46 {{ $slot }}

比赛2

  

完全匹配302-315 {{$example }}

第3场

  

完全匹配452-467 {{$category1 }}

第4场

  

完全匹配589-603 {{ $Product2}}

Answer 3

请尝试以下（see regex101.com）：

const text = "<h1>Hello world!</h1> <h2>What is {{ $slot }} Ipsum?</h2> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to {{$example }}make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially {{$category1 }} unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more {{ $Product2}} recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>&nbsp;</p><p>&nbsp;</p>";

let regex = /\{\{\s*(\$[\w_]+)\s*\}\}/g;

let data = text.match(regex);
console.log(data)

Answer 4

只需使用RegExp literal并且：

• 通过$转义\$以从字面上匹配$字符，不要偶然在正则表达式的中间断言行位置的结尾
• 使用g全局匹配标志来匹配字符串中的每个匹配项

More on available flags and character classes

---

因此最终的正则表达式为：

/{{\s*\$\w+\s*}}/g

---

工作示例：

const text = '<h1>Hello world!</h1> <h2>What is {{ $slot }} Ipsum?</h2> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to {{$example }}make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially {{$category1 }} unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more {{ $Product2}} recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>&nbsp;</p><p>&nbsp;</p>'

let data = text.match(/{{\s*\$\w+\s*}}/g)

console.log(data)

OR

...通过RegExp constructor，只需确保正确地转义RegExp character classes并通过前导\已经出现\个字符：

const text = '<h1>Hello world!</h1> <h2>What is {{ $slot }} Ipsum?</h2> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to {{$example }}make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially {{$category1 }} unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more {{ $Product2}} recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>&nbsp;</p><p>&nbsp;</p>'

let data = text.match(new RegExp('{{\\s*\\$\\w+\\s*}}', 'g'))

console.log(data)