动态地将类添加到跨度的特定部分

Question

我想动态地将一个类添加到定义跨度的特定句子中。

假设我想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>

Answer 1

使用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 {&nbsp; 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>

Answer 2

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 {&nbsp; 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>

Answer 3

您可以获取内容中句子的开始和结束索引，并使用颜色类为其添加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)&nbsp; &nbsp; &nbsp;selectSpan.innerHTML = content.substring(0,start) + `<span class="focusColorClass">${sentence}</span>` + content.substring(end,content.length);.focusColorClass {&nbsp; 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>