如何用跨度打包標題的第一個字

Question

我想實現something similar，但要將每個<h1>標記的第一個字用<span>標記打包。它應該是這樣的：

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

我quess它無需插件doneable ...

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>

---

供參考：由於它重新創建內部元素，它將銷燬任何附加到其後代元素的處理程序。

---

UPDATE：如果你要更新所有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>

Answer 2

真誠的，這個任務是非常困難的！很好的問題！ 順便說一句，我認爲可以接受的解決方案如下： 我將h1標籤的所有第一個單詞替換掉而沒有丟失聽衆... 希望它有幫助！

function WrapFirstH1WordCtrl() { 
 
    let titles = this.querySelectorAll("h1"); 
 
    let test = this.getElementById('test'); 
 
    
 
    test.onclick =() => console.log("HELLO GUYS"); 
 
    
 
    
 
    Array.prototype.forEach.call(titles, (title) => { 
 
    let value = title.firstChild.nodeValue; 
 
    let t = /^(\w+)/.exec(value).pop(); 
 
    let 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 { 
 
    background: lightseagreen; 
 
}

<h1>foo 1 <button id="test">HELLO AND KEEP LISTENERS</button></h1> 
 
<h1>foo 2</h1> 
 
<h1>foo 3</h1> 
 
<h1>foo 4</h1> 
 
<h1>foo 5</h1> 
 
<h1>foo 6</h1> 
 
<h1>foo 7</h1> 
 
<h1>foo 8</h1> 
 
<h1>foo 9</h1> 
 
<h1>foo 10</h1> 
 
<h1>foo 11</h1> 
 
<h1>foo 12</h1> 
 
<h1>foo 13</h1> 
 
<h1>foo 14</h1> 
 
<h1>foo 15</h1> 
 
<h1>foo 16</h1> 
 
<h1>foo 17</h1> 
 
<h1>foo 18</h1> 
 
<h1>foo 19</h1> 
 
<h1>foo 20</h1> 
 
<h1>foo 21</h1> 
 
<h1>foo 22</h1> 
 
<h1>foo 23</h1> 
 
<h1>foo 24</h1> 
 
<h1>foo 25</h1> 
 
<h1>foo 26</h1> 
 
<h1>foo 27</h1> 
 
<h1>foo 28</h1> 
 
<h1>foo 29</h1> 
 
<h1>foo 30</h1>

Answer 3

這可能是一種選擇。不是很優雅，但應該完成這項工作。如果我沒有錯，這應該隻影響h1元素的第一個textNode。剩下的就是在現有元素之前插入創建的span，而不影響後代元素。糾正我，如果我錯了。 ）

var titles = document.querySelectorAll('.title'); 
 

 
titles.forEach(function(e) { 
 
    var childNodes = [].slice.call(e.childNodes), 
 
     txtContent = childNodes.shift().textContent, 
 
     span; 
 
    e.childNodes[0].textContent = ''; 
 
    txtContent.split(' ').forEach(function(s, i) { 
 
    if(i > 0) { 
 
     e.insertBefore(document.createTextNode(" " + s), e.children[1]); 
 
    } else { 
 
     span = document.createElement('span'); 
 
     span.textContent = s; 
 
     e.insertBefore(span, e.firstChild); 
 
    } 
 
    }) 
 
})

span { 
 
    color: red; 
 
} 
 

 
.baz { 
 
    color: green; 
 
}

<h1 class="title">Hello World</h1> 
 
<h1 class="title">Hello Foo Bar <span class="baz">Baz</span></h1>