首頁(yè) 猿問(wèn) 動(dòng)態(tài)地將類添加到跨度的特定部分

動(dòng)態(tài)地將類添加到跨度的特定部分

JavaScript

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

我想動(dòng)態(tài)地將一個(gè)類添加到定義跨度的特定句子中。假設(shè)我想focusColorClass在 span 的這句話中添加 CSS 類：不告訴我你怎么能這樣？！我們?cè)鯓硬拍茏龅竭@一點(diǎn)？我試過(guò)這個(gè)沒(méi)有運(yùn)氣！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貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊

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

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>

反對(duì) 回復(fù) 2022-10-21

婷婷同學(xué)_

TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊

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;

}

<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>

反對(duì) 回復(fù) 2022-10-21

冉冉說(shuō)

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊

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

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;

}

<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>

反對(duì) 回復(fù) 2022-10-21