Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a javascript function that converts characters to the &code; equivalent?

I have text that was created created with CKeditor, and it seems to be inserting &nbsp; 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 &nbsp; 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?

like image 938
NullVoxPopuli Avatar asked Nov 04 '22 10:11

NullVoxPopuli


2 Answers

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;
like image 64
Ben Lee Avatar answered Nov 09 '22 12:11

Ben Lee


  1. Conversion of spaces to &nbsp; is usually done by the browser while editing content.
  2. Conversion of ' to &#39; can be controled with http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.entities_additional
  3. and 4. are usually needed to avoid breaking code that it's written in design view when loading again that content. You can try to change http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.basicEntities but that usually can lead to problems in the future.
like image 30
AlfonsoML Avatar answered Nov 09 '22 13:11

AlfonsoML