Question

I have this HTML code (it is located in contenteditable="true" block):

<ol>
    <li>Mozilla Firefox 1.5+</li>
    <li>Internet <span>Explorer</span> 6+</li>
    <li>Opera 9.6+</li>
    <li>Google Chrome 2+</li>
    <li>Apple Safari 3+</li>
</ol>

User has selected some text in this list:

• exactly the word «Chrome»,
• or exactly the word «Explorer» (it is wrapped with span tag).

The main difference between words «Chrome» and «Explorer» is that word «Explorer» is wrapped with span tag, but «Chrome» is not.

So, how do I know if selected text wrapped with some HTML tags or not?

1. With some regexp? — I don’t know how to get selected text with HTML tags (I know only how to get plain text from selection).
2. With detecting range’s commonAncestorContainer.parentNode? — If I have selected word «Chrome», my parentNode will be li tag (but li tag doesn’t wrap my selected word directly, I don’t want set styles for li tag). So, I cannot use commonAncestorContainer.parentNode ‘cos it is useless for me.

Actually, I just want to set some CSS styles for the selected text:

1. if user’s selected text has already directly wrapped with some HTML tag, I want to add CSS rules for this tag (eq. if user has selected word «Explorer» I want to add style="font-weight:bold;" for the span tag; if user has selected Apple Safari 3+ I want to add CSS rules for li tag)
2. if user’s selected text is just plain text (not directly wrapped with some tags, like word «Chrome»), I want to wrap this text with some tags and add some CSS rules. (With this item I have no problems, I know how to do this.)

UPD:
Look, when I select some text and then run document.execCommand('Bold', false, null), browser wraps my selection with b tags. When I select exactly the same text again and run the same document.execCommand('Bold', false, null) command, boldness disappear. So, browser somehow knows that my selection is wrapped with b tags and remove them (unwrap). So, how does browser know, is selection wrapped with tags or not? If browser knows, why it is so hard to make it with JS?

Answer 1

This is a slightly complex area:

• IE < 9 has a completely different API for selections and ranges from other browsers
• Getting hold of and then styling the selected content requires some careful DOM manipulation

Here are two suggestions:

• If you just want to toggle boldness on the selection, you can use document.execCommand("bold", false, null)
• If using CSS classes rather than element style properties/attributes, you could use the CSS class applier module of my Rangy library.