цикл по объектам внутри массива в регулярном выражении

Question

EDITED

Я получил массив объектов:

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,

Answer 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>