如果我没弄错的话，您基本上是想找到keywords变量中的每个单词，并在字符串中匹配它们，以便可以将它们 Package 在span中。
你需要先将关键字转换成正则表达式，然后进行全局匹配。

const keywordsString = "cake pie cookies";
const keywords = keywordsString.split(/\s/);

// equivalent to: /(cake|pie|cookies)/g
const pattern = new RegExp(`(${keywords.join('|')})`, 'g'); 

const phrase = "I like cake, pie and cookies";

const result = phrase.replace(pattern, match => `<span>${match}</span>`);

console.log(result);

基本上，您需要一个模式，其中关键字用管道（|）分隔并用括号（()）括起来，然后您只需要执行一个全局搜索（g标记），以便匹配所有关键字。
有了全局标志，就不需要循环了，一次就可以得到所有的值。

基于@samanime的答案。我先删除重复的单词，删除空格，突出显示较长的单词。
唯一的问题是跨越元素边界的匹配。例如“The element”中的[“elem”，“lemen”]

const tokens = [...new Set(state.highlight.split(' '))]
       .map(s => s.trim())
       .filter(s => s.length)
       .sort((a,b) => b.length - a.length);

const pattern = new RegExp(`(${tokens.join('|')})`, 'ig');
const highlighted = this.state.value.replace(pattern, match => `<b>${match}</b>`);

console.log(highlighted);