0
192
ViewsHow to remove Highlight (<mark>) from a paragraph using Javascript
I have HTML where some paragraphs contain <mark> elements. This causes the text within the <mark> element to be highlighted. Essentially, I want to remove the highlight by removing the <mark> element but keeping the textContent.
What's the best way to do this?
Here's an example paragraph:
I want to remove the highlighted text. The HTML contains <span> and other elements and some <mark> elements that I don't want removed. The ones I want removed have a class of .show-mark. I know how to find just the <mark> elements that I want to remove but I don't know how to remove them.
Here's the HTML for the example paragraph:
<p id="p85" class="cmiTranPara note-style-bookmark note-style-bookmark-start note-style-bookmark-end">
<i class="playmark play icon"></i>
<i class="timing large circular red clock icon"></i>
<span class="pnum has-annotation" data-aid="1574791210024">(p85) </span>
Miracle-mindedness is still a stage of perception just short of
<mark class="show-mark">master</mark>y. For
<mark class="show-mark">master</mark>y comes when you know that you are literally and deliberately creating. And there is nothing miraculous about it. You will decree a thing and it shall be so!
</p>
Thanks for your help.
·
Juan Pablo Isaza
1 answers
Answer question0
Try something like this
targets = document.querySelectorAll("mark");
for (let target of targets) {
target.outerHTML=target.innerHTML;
}
and see if it works.
·
Juan Pablo Isaza
Report
Answer question