Question

I have text that was created created with CKeditor, and it seems to be inserting   where spaces should be. And it appears to do similar conversions with >, <, &, etc. which is fine, except, when I make a DOMSelection, those codes are removed.

So, this is what is selected:

before<a href=\"http://wiki.teamliquid.net/starcraft2/Hatchery\" style=\"text-decoration: none; color: rgb(0, 43, 184); background-image: none; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: initial initial; \" title=\"Hatchery\">Hatchery</a> (2)

But this is what is actually in the DOM:

before<a href=\"http://wiki.teamliquid.net/starcraft2/Hatchery\" style=\"text-decoration: none; color: rgb(0, 43, 184); background-image: none; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: initial initial; \" title=\"Hatchery\">Hatchery</a>&nbsp;(2)

note that I outputted the selection and the original text stored in the database using variable.inspect, so all the quotes are escaped (they wouldn’t be when sent to the browser).

---

To save everyone the pain of looking for the difference:
From the first: Hatchery</a> (2) (The Selection)
From the second: Hatchery</a>&nbsp;(2) (The original)
These differences are at the very end of the selection.

---

So… there are three ways, I can see of, to approach this.

1) - Replace all characters commonly replaced with codes with their codes, 
     and hope for the best.
2) - Javascript may have some uncommon function / a library may exist that 
     replaces these characters for me (I think this might be the way CKeditor 
     does its character conversion).
3) - Figure out the way CKeditor converts and do the conversion exactly that way.

I’m using Ruby on Rails, but that shouldn’t matter for this problem.

Some other things that I found out that it converts:

1: It seems to only convert spaces to   if the space(s) is before or after a tag:
   e.g.: "With quick&nbsp;<a href..."
2: It changes apostrophes to the hex value
   e.g.: "opponent&#39;s"
3: It changes "&" to "&amp;"
4: It changes angle brackets to "&gt;" and "&lt;" appropriately.

Does anyone have any thoughts on this?

Answer 1

To encode html entities in str (your question title asks for this, if I understand correctly):

$('<div/>').text(str).html();

To decode html entities in str:

$('<div/>').html(str).text();

These rely on jQuery, but vanilla alternatives are basically the same but more verbose.

To encode html entities in str:

var el = document.createElement('div');
el.innerText = str;
el.innerHTML;

To decode html entities in str:

var el = document.createElement('div');
el.innerHTML = str;
el.innerText;