javascript - 如何用跨度包裹标题的第一个单词

Question

我想实现something similar ，但要包装每个 <h1> 的第一个单词带有 <span> 的标签标签。它应该看起来像这样:

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

我想不用插件也能完成......

Answer 1

使用 JavaScript String#repalce 方法

var tag = document.querySelector('h1');

tag.innerHTML = tag.innerHTML.replace(/^\s*\w+/, '<span style="color:red">$&</span>');

<h1>This is a title </h1>

<小时/>

仅供引用:由于它重新创建内部元素，因此它将销毁附加到其后代元素的任何处理程序。

<小时/>

更新:如果您想更新所有 h1 标记，那么您需要获取所有 h1 并迭代它们。

Array.from(document.querySelectorAll('h1')).forEach(function(ele) {
  ele.innerHTML = ele.innerHTML.replace(/^\s*\w+/, '<span style="color:red">$&</span>');
});

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