Question

I am trying to write a routine that compares the $(element).text() and $(element).html() outputs to determine the locations of html tags. This will later be used for applying formatting tags like “strong” and “em” to a contenteditable, without resorting to document.execCommand().

At this point I realize that to make the comparison work, characters such as ‘>’, ‘<‘, and ‘&’ in the $(element).text() output need to be converted to their respective html entities. From firebug I see that these characters are automatically converted in the innerHTML properties. I have tried other characters. such as quotes and umlauts, and these do not get converted.

My questions are:

1. Is there an essential set of characters (my guess would be >, <, and &) that get converted consistently across browsers? My target browsers are Firefox and Chrome, no IE for this, thank goodness.

2. Is this set of characters respected by jQuery’s .html() method, or is jQuery doing its own thing to level the differences across browsers. If so, where can I find a comprehensive list of just the essential characters that jQuery converts to entities?

Further clarification:

if on a contenteditable I have a paragraph with this text entered manually:

some text, and some characters >, <, ", &, ', ë

$('p').text() will give me:

some text, and some characters >, <, ", &, ', ë

while $('p').html() will give me:

some text, and some characters >, <, ", &, ', ë

This is also the result I see in both firebug, and chrome developer tools.

The <, >, and & are obviously essential in order for the whole thing to work, while quotes and special characters are not.

I want to convert the result of $('p').text() via find/replace all, so as to match the output of the $('p').html(), minus the tags themselves.

I need to know which other characters beside the obvious <, >, and & need to be converted to html entities to have a perfect match.

What this is for:

I am trying to build a simple WYSIWYM editor with a contenteditable div, without resorting to the existing WYMEditor and the iFrame it comes with.

This will be used in a controlled environment (my custom cms) and will allow for a subset of the features expected in a html editor. Basically the whole thing is a bunch of P, H1-H6, and UL>LI, OL>LI tags located in a contenteditable div.

The content tags (P, H1-H6, and LI tags that don’t have UL or OL children) will be allowed to contain only STRONG, EM, A, SUB, SUP and SPAN tags.

I am not targeting IE, but would like to have this working in FF and Chrome without the platform differences. One of these platform differences is the way document.execCommand() is carried out when bolding or italicizing text. FF wraps selection in while chrome uses tags. I have decided to use the following way to apply formatting:

1. Get selection range.
2. List all “content tags” within the range.
3. using the range object, and its relation to each “content tag” I define three chunks of text: Before selection, selection and After selection. These are coming as straight text, with special characters not converted to entities.
4. for each “content tag” innerhtml, I parse character by character to decompose into a “map” of each kind of tag. I have established a hierarchy of tags: a > span > sub|sup > strong > em. The “map” will be something like this:

for innerhtml: this <em>is <strong>a</strong></em> <a href="#"><strong>test</strong> text

text: this is a test text
     a: __________XXXXXXXXX
strong: ________X_XXXX_____
    em: _____XXXX__________

1. using the before selection, selection and after selection text, as well as the formatting operation, I then create a mask. For instance if ‘this is’ needs to be bolded: the mask would be:

  text: this is a test text
strong: XXXXXXX____________

1. after combining the mask with the map, the resulting map is:

  text: this is a test text
     a: __________XXXXXXXXX
strong: XXXXXXX_X_XXXX_____
    em: _____XXXX__________

1. this map gets converted to html:

<strong>this <em>is</em></strong><em> </em><strong><em>a</em></strong> <a href="#"><strong>test</strong>

1. replace the “container tag”‘s innerhtml with the resulting html.

Now the reason I asked this question is that I need the text chunks extracted from the html and the texts given to me by the ranges to match perfectly. So I cannot go converting any special character, but only the “essential” ones.

I am aware that this might not be the easiest or fastest way to go after this problem, but I am a visual thinker, and somehow laying out the problem in a 2-dimensional grid greatly helps.

Answer 1

It’s not really clear to me what you are attempting and asking here.

For now all I can say is: Yes, <, > and & (also ' and " if using inside an attribute quoted with them) should to be escaped if written to .html()/.innerHTML. They they don’t need to be escaped in all cases, but it’s never wrong to always do it.

If you need a more extensive answer you’ll need to be more specific (for example with code examples).

EDIT:

I’m still not sure if I understand what you are trying to achieve. Are you trying to get rid of any HTML elements (tags) inside your p element? Then you just can set read the text and set it back:

$("p").text($("p").text());

Or if you just need to convert any problematic characters, you can use a “unanonymous” element, set it’s text to the text you wish o convert and read it’s .html():

alert($("<div>").text("some text, and some characters >, <, \", &, ', ë").html());