Question

已编辑

我有一个对象数组：

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

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

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

使用此正则表达式（上方）会突出显示所有以“ @”开头的内容。我如何在我的正则表达式中循环遍历对象数组，因此只有在提到我的一个用户的情况下，它才变为true。例如：
“ @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>

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

1 个答案: