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

时间:2018-07-30 18:58:22

标签: javascript

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

[
    ['{{ $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作为结果。

任何建议为什么?

感谢您的答复!

4 个答案:

答案 0 :(得分:3)

在JavaScript中,regexp literalstring 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}}" ] 标志,以返回所有匹配的字符串,而不仅仅是第一个。

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

答案 1 :(得分:1)

尝试不使用第一个斜杠

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

regex101 example

第1场

  

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

比赛2

  

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

第3场

  

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

第4场

  

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

答案 2 :(得分:1)

请尝试以下(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)

答案 3 :(得分:1)

只需使用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)

豫ICP备18024241号-1