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

Question

我在这里有工作示例

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

在这里我写了一些条件，例如单词是否以{和}开头和结尾，它们需要以可编辑的方式突出显示。在这里，它对于没有空格的单词（如{username}）有效，但是对于{host}来说，则不带该单词突出显示，如果还有诸如{pas}之类的单词，也可以！

然后仅需突出显示{pas}的单词，但要加上它！

任何人都可以帮助我在这种情况下犯的错误

预先感谢

Answer 1

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

[
  '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}！由于我们正在与空间分裂，因此无法正常工作。为了解决该问题，我们可以在该令牌之前和之后添加额外的空间。使用下面的一行在所有条件下均可工作。

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