循环遍历正则表达式中的数组内的对象答案

【问题标题】：loop through objects inside an array in a regex循环遍历正则表达式中的数组内的对象
【发布时间】：2019-03-18 11:18:33
【问题描述】：

已编辑

我有一个对象数组：

values: [
          { key: "CollinHenderson" },
          { key: "SarahDrasner" },
          { key: "EvanYou" },
          { key: "AdamWathan" }
        ]

如果提到其中之一，我想突出显示文本（“@...”）：

.innerHTML
    .replace(
      /(?:|^)@[A-Za-z0-9\\-\\.\\__äÄöÖüÜß]+(?:|$)/g,
      "<span  contenteditable='false' class='markAt'>$&</span>"
    );

使用这个正则表达式（上图），所有以“@”开头的内容都会突出显示。我怎么能在我的正则表达式中循环遍历我的对象数组，这样只有当我的一个用户被提及时它才会被证明是正确的。例如：
“@hello”应该是假的
"@CollinHenderson" 应该为真，因此被突出显示

/(?:|^)@[  //loop through array - if matches a value -> true // ]+(?:|$)/g,

【问题讨论】：

代码中的对象数组不是一个很好的例子，请提供一个至少有一个@ 的输入，然后发布一个你期望结果的例子。然后发布您尝试用来获得这些结果的代码。然后发布你得到的结果（你没想到的是你的代码损坏的结果）提供所有这些作为minimal reproducible example。

标签： arrays regex loops object

【解决方案1】：

你可以传递一个函数来替换和签入

const values = [{
    key: "CollinHenderson"
  },
  {
    key: "SarahDrasner"
  },
  {
    key: "EvanYou"
  },
  {
    key: "AdamWathan"
  }
]

const el = document.getElementById('foo');

el.addEventListener('keyup', e => {

  document.getElementById('bar').innerHTML = e.target.value
    .replace(
      /(?:|^)@[A-Za-z0-9\\-\\.\\__äÄöÖüÜß]+(?:|$)/g,
      m => {
        if (values.find(v => m.substring(1) === v.key)) return "<span  contenteditable='false' class='markAt'>"+ m + "</span>";
       return m;
      }
    );
});

.markAt {
  font-weight: 700;
}

<textarea id="foo"></textarea>
<div id="bar">

</div>

【讨论】：