我需要從一串文本中提取一些單詞，將這些單詞的每個字符插入到 span 元素中，然后用 span 元素替換提取的單詞。我已經能夠將字符轉換為跨度元素，但我無法弄清楚如何用跨度元素替換提取的單詞而不洗掉其他單詞。
<h1 class="title">Lorem ipsum dolor sit amet</h1>
const title = document.querySelector('.title');
// Extract required words and split them into single character
const firstWord = title.textContent.split(' ').filter(wrd => wrd.startsWith('L')).toString().split('');
const secondWord = title.textContent.split(' ').filter(wrd => wrd.startsWith('a')).toString().split('');
// Return a new array with every character inside a span element
const spanCharacters = arr => {
return arr.map(char => {
const span = document.createElement('span');
span.textContent = char;
return span;
});
};
const spanFirstWord = spanCharacters(firstWord);
// return [<span>L</span>, <span>o</span>, <span>r</span>, <span>e</span>, <span>m</span>]
const spanSecondWord = spanCharacters(secondWord);
// return [<span>a</span>, <span>m</span>, <span>e</span>, <span>t</span>]
現在，我想做的是：
<!-- before -->
<h1 class="title">Lorem ipsum dolor sit amet</h1>
<!-- after -->
<h1 class="title"><span>L</span><span>o</span><span>r</span><span>e</span><span>m</span> ipsum dolor sit <span>a</span><span>m</span><span>e</span><span>t</span></h1>
如何用生成的跨度替換提取的單詞，將其他單詞保留在原處？
uj5u.com熱心網友回復：
這是一種方法：
const ttl=document.querySelector("h1.title"),
txt=ttl.textContent;
function spanifyWords(beginsArr,txt){
return txt.split(" ").map(w=>{
if (beginsArr.some(b=>w.startsWith(b)))
w="<span>" w.split("").join("</span><span>") "</span>";
return w
}).join(" ");
}
ttl.innerHTML=spanifyWords(["a","L"],txt);span {color: green; border:1px solid red}<h1 class="title">Lorem ipsum dolor sit amet</h1>而不是. filter()-ing，我習慣于.map()遍歷每個單詞。在回呼函式中，我檢查當前單詞是否以.some()相關beginsArr字符之一開頭。如果是這樣，我將“spanify”這個詞，否則我按原樣回傳這個詞。最后，我將所有內容再次縫合在一起.join()。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/474622.html
標籤：javascript html 数组