Javascript 如何将标题的第一个单词用空格括起来

我想实现，但要用

标签包装每个

标签的第一个单词。应该是这样的：

 <h1><span>This</span> is a title</h1>

这是一个标题

我想它不需要插件就可以完成…

使用JavaScript方法

var tag=document.querySelector（'h1'）；
tag.innerHTML=tag.innerHTML.replace（/^\s*\w+/，'$&'）
这是一个标题
诚恳地说，这项任务非常困难！好问题！
顺便说一下，我认为一个可接受的解决方案可以是：
我替换了h1标签的所有第一个单词，没有丢失侦听器。。。
希望有帮助


函数WrapFirstH1WordCtrl（）{
设titles=this.queryselectoral（“h1”）；
让test=this.getElementById（'test'）；
test.onclick=（）=>console.log（“大家好”）；
Array.prototype.forEach.call（titles，（title）=>{
让值=title.firstChild.nodeValue；
设t=/^（\w+/.exec（value）.pop（）；
设span=this.createElement（'span'）；
span.innerHTML=t | |“”；
title.firstChild.nodeValue=value.replace（t，“”）
title.insertBefore（span，title.firstChild）；
});
}
document.addEventListener（'DOMContentLoaded'，WrapFirstH1WordCtrl.bind（document））
span{
背景：轻海绿色；
}
foo 1大家好，请继续收听
富2
富3
富4
富5
富6
富7
富8
富9
富10
富11
富12
富13
富14
富15
富16
富17
富18
富19
富20
富21
富22
富23
富24
富25
富26
富27
富28
富29
foo 30
这可能是一个选项。不是很优雅，但应该能胜任。如果我没有弄错的话，这应该只影响
h1
元素的第一个
textNode
。其余的只是在现有元素之前插入创建的
span
，而不影响子元素。如果我错了，请纠正我


var titles=document.querySelectorAll（'.title'）；
标题.forEach（功能（e）{
var childNodes=[].slice.call（e.childNodes），
txtContent=childNodes.shift（）.textContent，
跨度
e、 childNodes[0]。textContent=''；
txtContent.split（“”）.forEach（函数（s，i）{
如果（i>0）{
e、 insertBefore（document.createTextNode（“+s”），e.children[1]）；
}否则{
span=document.createElement（'span'）；
span.textContent=s；
e、 插入之前（跨度，即第一个孩子）；
}
})
})
span{
颜色：红色；
}
巴兹先生{
颜色：绿色；
}
你好，世界
Hello Foo Bar Baz
当然，这将通过丢弃并从头开始重新创建来清除附加到
h1
元素中任何子元素的任何处理程序或数据。这只是个问题，如果它是个问题的话。太好了！你能给我解释一下，在这段代码中，
/^\s*\w+/
在做什么吗？@Gallex:它是正则表达式来匹配开头的字符串-其中
\s
表示空格字符，
\w
表示单词字符