如何在$ctrl之后匹配有效的属性访问.在js中使用正则表达式?

Question

我想找到$ctrl.之后的属性和我用来这样做的正则表达式:/$ctrl.(w+)(?:.w+)?/g。

这个正则表达式不够好，因为对于输入:

const str =
'$ctrl.bla $ctrl.bar.foo $ctrl.bla{{index}}.foo $ctrl.1bla $ctrl.invalid.prop{{index}}';

它匹配:

$ctrl.bla      <--- good.
$ctrl.bar.foo. <-- not good. should find the `bar` because it's the word after $ctrl.
$ctrl.bla      <--- goood
$ctrl.1bla.    <-- invalid property syntax because it has number.
$ctrl.invalid.prop  <-- should match the invalid word not matter that prop end with {{.

如何改变正则表达式匹配有效的属性语法?

const regex = /$ctrl.(w+)(?:.w+)?/g;
const str =
'$ctrl.bla $ctrl.bar.foo $ctrl.bla{{index}}.foo $ctrl.1bla $ctrl.invalid.prop{{index}}';
let match;
while ((match = regex.exec(str)) != null) {
console.log(match[0]);
}

stackblitz.com

Answer 1

正如之前在评论中发布的那样，您可以使用regex仅匹配字母(a-zA-Z仅使prop大小写不敏感)并向前/向后看以仅匹配您需要的内容。

我的解决方案:

const regex = /(?<=$ctrl.)[a-zA-Z]+(?=s|.|$)/g
console.log('$ctrl.bla $ctrl.bar.foo $ctrl.bla{{index}}.foo $ctrl.1bla $ctrl.invalid.prop{{index}}'.match(regex))
// Output: ['bla', 'bar', 'invalid']

正则表达式解释道:

• (?<=$ctrl.):这是一个积极的向后看，因为我只需要匹配$ctrl之后的属性，而不需要实际匹配它
• [a-zA-Z]+:只匹配从a到z的字母，不区分大小写(+至少匹配其中一个)
• (?=s|.|$):这是一个积极的向前看，我用它来断言，如果我匹配一个道具，实际的字符串将在它之后结束，要么有空格(s)，点(.)，要么因为字符串结束($)

通过使用向后看和向前看，我们可以确保只匹配我们需要的内容(在本例中只匹配道具名称)