loop through objects inside an array in a regex - arrays

Question

EDITED
I got an array of objects:
values: [
{ key: "CollinHenderson" },
{ key: "SarahDrasner" },
{ key: "EvanYou" },
{ key: "AdamWathan" }
]
I want to highlight the text if one of them is mentioned ("#..."):
.innerHTML
.replace(
/(?:|^)#[A-Za-z0-9\\-\\.\\__äÄöÖüÜß]+(?:|$)/g,
"<span contenteditable='false' class='markAt'>$&</span>"
);
with this regex (above) everything gets highlighted which starts with a '#'. How could I loop trough my array of objects inside of my regex, so that it only turns out true if one of my users get mentioned. For Example:
"#hello" should be false
"#CollinHenderson" should be true and get therefore highlighted
/(?:|^)#[ //loop through array - if matches a value -> true // ]+(?:|$)/g,

Answer 1

You can pass a function to replace and check in there
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>