正则表达式匹配以使用 angular 的表达式开始和结束

Question

我这里有我的工作示例

https://stackblitz.com/edit/angular-fk2vpr?embed=1&file=src/app/app.component.ts

我在这里写了条件，比如如果单词以 { 和 } 开头和结尾，它们需要突出显示并以可编辑的方式。这里对于没有像 {username} 这样的 space 的词来说工作正常，但是如果是 {host} 那么它不会把那个词高亮显示，而且如果像 {pas} 这样的词！

然后 {pas} 单独的词需要突出显示，但它也随之而来 !!

任何人都可以帮助我在这个场景中犯了什么错误

提前致谢

Answer 1

问题在于 data.split(' ') 的映射。请注意，当您在字符串 username { username} scrypt secret {password} 上调用它时，您不会像您希望的那样获得包含 5 个元素的数组（即 ['username', '{ username}', 'scrypt', 'secret', '{password}']），但它会在每个 space 字符；所以结果数组看起来更像这样：

[
  'username',   '',
  '{',          '',
  '',           'username}',
  'scrypt',     'secret',
  '{password}'
]

如果可以，我建议将 arr 数组制作成数组的数组，每个子数组都包含要启动正则表达式的单词。但是，如果这不是一个选项，我建议不要像那样拆分，而是像这样映射：

this.mappedArr = this.arr.map(data => {
    const editable = data.match('([{].*?[}])');
    console.log(editable);
    return {
      editable,
      data: !editable ? 
            data :
            data.match(/(\{+ *)?\w+( *\}+)?/g).map(word => ({word, editable: word.match('^[{].*?[}]$')})) <
    };
})

虽然这需要重构，但它应该作为紧急修复工作。

Answer 2

尝试使用以下代码，它会起作用。

 const editable = data.match(/{+.*?}+/gi);
  if(editable){
    editable.map(word => {
      const re= new RegExp(word,'g');
      data = data.replace(re,' '+ word.replace(/\s/gi,'')+' ')
    })
  }

根据上面的代码令牌{username}！！将无法正常工作，因为我们正在与 space 拆分。要解决该问题，我们可以在该标记前后添加额外的 space。使用下面的行可在所有条件下工作。

data = data.replace(word, ' ' + word.replace(/\s/g,'') + ' ')

正则表达式匹配以使用 angular 的表达式开始和结束

regex match starts and ends with expression using angular

javascript

regex

angular

angular7