Search for string in paragraph and underline it

userUYV01 0
Viewed 69

I have a paragraph, e.g.

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

and a string like "Lorem ipsum amet, consetetur sadipscing elitr". I want to achieve underlining this particular string in the original paragraph with Javascript.

I think I need to insert a span with a class/id (-> CSS: text-decoration:underline) but I don't know how to determine the correct indices within the paragraph (ignoring any <b>, <i> etc. in the string search but including them wrt the index of the span).

Thanks for any advice.

string indexing javascript css html
2 Answers

Try this:

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

UPDATE:

Use this method to underline Lorem ipsum amet, consetetur sadipscing elitr whether there are other tags (<b> or <i>) or not: 

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

Johna0

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

chovy0
Related