首頁猿問動態地將類添加到跨度的特定部分

動態地將類添加到跨度的特定部分

JavaScript

一只萌萌小番薯 2022-10-21 09:44:38

我想動態地將一個類添加到定義跨度的特定句子中。假設我想focusColorClass在 span 的這句話中添加 CSS 類：不告訴我你怎么能這樣？！我們怎樣才能做到這一點？我試過這個沒有運氣！const selectSpan = document.getElementById('dialogue-span')const sentence = "How could you do this without telling me?!";selectSpan.innerHTML = selectSpan.innerHTML.replace(new RegExp('(' + sentence + ')'), `<span class="focusColorClass">${sentence}</span>`); .focusColorClass { color: red;}<div id="answerSentence" class="answerSentence-class"><span id="dialogue-span">You pirced her ears. How could you do this without telling me?! Now if I had told you Then it would'nt have been a surprise! now would it?! I think she looks cute... But I'm wrong!!!</span></div>

查看完整描述

3 回答

浮云間

TA貢獻1829條經驗獲得超4個贊

使用replace功能。這會用您的代碼替換您正在尋找的句子。

const selectSpan = document.getElementById('dialogue-span')

const sentence = "How could you do this without telling me?!";

selectSpan.innerHTML = selectSpan.innerText.replace(sentence, `<span class="focusColorClass">${sentence}</span>`);

.focusColorClass {

color: red;

}

<span id="dialogue-span">You pirced her ears. How could you do this without telling me?! Now if I had told you Then it would'nt have been a surprise! now would it?! I think she looks cute... But I'm wrong!!!</span>

</div>

反對回復 2022-10-21

婷婷同學_

TA貢獻1844條經驗獲得超8個贊

const selectSpan = document.getElementById('dialogue-span')

const sentence = "How could you do this without telling me?!";

selectSpan.innerHTML = selectSpan.innerHTML.replace(sentence, `<span class="focusColorClass">${sentence}</span>`);

.focusColorClass {

color: red;

}

</div>

反對回復 2022-10-21

冉冉說

TA貢獻1877條經驗獲得超1個贊

您可以獲取內容中句子的開始和結束索引，并使用顏色類為其添加span父substring級，如下所示：

const selectSpan = document.getElementById('dialogue-span');

const sentence = "How could you do this without telling me?!";

let content = selectSpan.innerHTML;

let start = content.indexOf(sentence), end = start+sentence.length;

console.log(start,end);

if(start>-1)

selectSpan.innerHTML = content.substring(0,start) + `<span class="focusColorClass">${sentence}</span>` + content.substring(end,content.length);

.focusColorClass {

color: red;

}

</div>

反對回復 2022-10-21

3 回答
0 關注
113 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

動態地將類添加到跨度的特定部分

動態地將類添加到跨度的特定部分

3 回答

添加回答