在段落中搜索字符串并在其中加下划线

Question

我有一段，例如

<p>
Lorem ipsum <b>amet, consetetur sadipscing elitr, sed diam</b> dolor sit nonumy eirmod  tempor 
invidunt ut labore et dolore magna aliquyam erat, <i>sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum</i>. Stet clita kasd gubergren, no sea takimata sanctus
</p>

以及类似于CCD_ 1的字符串。我想用Javascript在原始段落中为这个特定的字符串加下划线。

我想我需要插入一个带有class/id的span(->CSS:text decoration:underline(，但我不知道如何确定段落中的正确索引(忽略字符串搜索中的任何<b>、<i>等，但将它们包含在span的索引中(。

谢谢你的建议。

Answer 1

试试这个：

//get the inner contents of the element
var text = document.getElementById("text").innerHTML;
//replace the text you want with that same text surrounded by <u> tags
var newtext = text.replace(/Lorem ipsum <b>amet, consetetur sadipscing elitr/g, "<u>Lorem ipsum <b>amet, consetetur sadipscing elitr</u>");
//put the new underlined text back into the element
document.getElementById("text").innerHTML = newtext;

<p id="text">
Lorem ipsum <b>amet, consetetur sadipscing elitr, sed diam</b> dolor sit nonumy eirmod  tempor 
invidunt ut labore et dolore magna aliquyam erat, <i>sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum</i>. Stet clita kasd gubergren, no sea takimata sanctus
</p>

更新：

无论是否有其他标记(<b>或<i>(，都可以使用此方法为Lorem ipsum amet, consetetur sadipscing elitr加下划线：

//get the html contents of the text
var var1 = document.getElementById("text").innerHTML;
//add <span class="underline"> before the first word of the sring you want to replace
var var2 = var1.replace(/Lorem/gi, '<span class="underline">Lorem');
//add </span> after the last word of the sring you want to replace
var var2 = var2.replace(/elitr/gi, "elitr</span>");
//put text with <span> back into the element
document.getElementById("text").innerHTML = var2;
//get the number of all elements with class name of underline
var var3 = document.getElementsByClassName("underline").length;
//get the number of </span> closing tags in the element
var var4 = (document.getElementById("text").innerHTML.match(/</span>/g)).length;
//get the number of unclosed tags
var var5 = var3 - var4;
//close any unclosed span tags
var var6 = "</span>" * var5;
var var6 = var6 + "</p>";
document.getElementById("text").outerHTML.replace(/</p>/gi, var6);
//get the number of all elements with class name of underline
var var7 = document.getElementsByClassName("underline").length
//run the inner functions the number of times there are elements with class name of underline
for (let i = 0; i < var7; i++) {
//get the element with class name of underline
var var8 = document.getElementsByClassName("underline")[i];

//if it's not the sring you want to underline, remove the <span class="underline"></span> from around it
if (var8.innerText !=  "Lorem ipsum amet, consetetur sadipscing elitr") {
var var9 = underline.innerHTML;
underline.outerHTML = var9;
}
}

.underline {
text-decoration: underline;
}

<p id="text">
Lorem ipsum <b>amet, consetetur sadipscing elitr, sed diam</b> dolor sit nonumy eirmod  tempor 
invidunt ut labore et dolore magna aliquyam erat, <i>sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum</i>. Stet clita kasd gubergren, no sea takimata sanctus
</p>

Answer 2

const text = YourString.replace(/bMySearchb/sg, '<u>$1</u>');