Highlight text and make bold text inside that highlighted section using JavaScript

Question

I've already done some example here:[http://jsfiddle.net/8mdX4/731/] but it doesn't higlight all selected text. It should highlight text "m ipsum dolor sit ame" and make bold text "um dolor si" inside of that highlighted text, but text "m ips" would remain unhighlighted.

Is there any option how to fix this or make some workaround?

Answer 1

I've just found solution in this thread:

https://groups.google.com/forum/#!topic/mozilla.dev.tech.dom/dQK0ioISIPM

It's really simple workaround. I'm having one range which should be highlighted and multiple ranges inside highlighted range which should be bolded.

At first, I have to deal with making bold text, because if I would highight text using "document.execCommand("BackColor",false, colour);" before that, it would somehow destroy my "bold ranges".

So solution is to replace or wrap text content of "bold ranges" with element like this:

if (boldRange) {
   boldRange.deleteContents();
   var newContents = document.createElement('b');
   newContents.textContent = 'text that would be bolded';
   boldRange.insertNode(newContents)
}

Example how it works is demonstrated here:

http://jsfiddle.net/8mdX4/733/