JavaScript将文本内容切分并将第一个单词包装在<；span>；标签

我正在将下面的jQuery代码转换为香草JavaScript，并且在最后一点上卡住了

在我的代码片段中，您将看到vanilla JS代码，在第一个单词之前插入了span包装的单词，而不是替换它

我是否错误地使用了

insertAdjacentHTML

功能

jQuery

var node = $(".content h1").contents().filter(function () {
  return this.nodeType == 3 }).first(),
  text = node.text(),
  first = text.slice(0, text.indexOf(" "));

if(!node.length)
  return;
        
node[0].nodeValue = text.slice(first.length);
node.before('<span>' + first + '</span>');

包含多个单词的示例字符串

不插入而只是替换怎么样

使用地图

constsplitheadings=（（）=>{
让节点=document.querySelector（“.content h1”）；
如果（节点）{
让content=node.textContent
.trim（）
.拆分（“”）
.map（（word，i）=>i==0？`${word}`:word）；
node.innerHTML=content.join（“”）
}
})();
h1跨度{
颜色：红色；
}

包含多个单词的示例字符串
map优先于regex还是regex优先？我一边学习JS，一边想使用最佳实践和高效代码。谢谢你的帮助。在这种情况下，regex可能更快。如果你还想改变第三个单词，Map就更通用了