我在这里有我的工作示例
https://stackblitz.com/edit/angular-fk2vpr?embed=1&file=src/app/app.component.ts
我在这里写了条件，例如单词是否以 { 和 } 开头和结尾，它们需要以可编辑的方式突出显示。在这里，对于没有像 {username} 这样的空格的单词，它的工作正常，但在 {host} 的情况下，它不会将该单词突出显示，如果像 {pas} 这样的单词也是如此！
然后{pas}这个词需要单独突出显示，但它伴随着它！
谁能帮助我在这种情况下犯了什么错误
提前致谢
【问题讨论】：
标签： javascript regex angular angular7
用下面的代码试试就行了。
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,'') + ' ')
【讨论】：
问题在于映射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('^[{].*?[}]$')})) <
};
})
虽然这需要重构，但它应该可以作为紧急修复。
【讨论】：