Замените слова, не заменяя их, если они появляются в другом открытом составном слове

Question

У меня есть абзац текста, который может содержать одно слово («собака»), которое также содержится в другом открытом составном слове («выгула собак»). У меня есть словарь слов, которые должны точно соответствовать слову, найденному в абзаце.

Я сопоставляю термины глоссария и создаю объект значения ключа, который будет использоваться в .replace()

 const wordTermArray = this.props.glossaryTerms.map(i => [
        `${i.glossaryItem}`,
        `<a href="#" class="glossary-item">${i.glossaryItem}</a>`,
      ]);

      const wordTermObject = Object.fromEntries(wordTermArray);

А вот этот объект используется в .replace()

 const replaceText = text.replace(
        /(\w+)/g,
        (match, key) => wordTermObject[key] || match,
      );

Но проблема в том, что использование .replace () может совпасть с "собакой" и "собакой" в "собачьем ходу". Итак, как бы я соответствовал слову или открытому составному слову в точности так, как оно выглядит в глоссарии, без перекрестной замены друг друга?

Я не ограничен Regex, а также не против использования библиотеки.

Answer 1

Я предлагаю создать регулярное выражение из ваших элементов глоссария после сортировки их по длине в порядке убывания, а затем обернуть соответствия тегом:

const glossaryTerms = ['dog', 'dog walker'];
glossaryTerms.sort(function(a, b){
  return b.length - a.length;
});
const wordTermRegex = new RegExp( glossaryTerms.map(i => i.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')).join("|"));
// => /dog walker|dog/
const replaceText = "dog walker and a dog".replace(wordTermRegex, '<a href="#" class="glossary-item">$&</a>');
// => <a href="#" class="glossary-item">dog walker</a> and a dog

См. Демонстрационную версию JS 1005 *.

Шаблон $& в замене относится ко всему совпадению.

См. Демонстрационную версию regex