0

Goal

Change content of a div into HTML encoded content for use in Ace editor.

Attempted Solution

I am trying to follow the solution here:

https://stackoverflow.com/a/1219983/1063287

With:

HTML

<div id="encode_me"><html>test</html></div>

jQuery

my_value = $("#encode_me");
$('<div/>').text(my_value).html();

jsFiddle

http://jsfiddle.net/rwone/3bFKG/8/

It is just outputting the text test.

Edit: Alternatively, there is a newer answer on that page that suggests:

function htmlEscape(str) {
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

And I tried to implement that in a jsFiddle with the same results as the first attempt:

HTML

<div id="encode_me"><html>test</html></div>

jQuery

my_value = $("#encode_me");

my_value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

jsFiddle

http://jsfiddle.net/rwone/6n2fR/

Community
  • 1
  • 1
user1063287
  • 10,265
  • 25
  • 122
  • 218

2 Answers2

1

A few major issues with your code. Here's what I did that works:

HTML

<div id="encode_me"><div>test</div></div>

JS

my_value = document.getElementById("encode_me").innerHTML;
my_value = $('<div/>').text(my_value).html();
$('div').text(my_value);
  • You can't have <html> as a tag. It gets ignored. Replace it with <div>, and you can then get innerHTML.
  • You can avoid jQuery as I did, or use it as my_value = $("#encode_me")[0].innerHTML;
  • For the selector to change the text, just look for a div, not a div end tag with the <>.

Looking through the answer you reference, the $('<div/>') stuff is used to create a new div that isn't added to the DOM, and use that for the HTML manipulation. After getting the innerHTML, I use that trick to encode the parts that need encoding. (If there was a text node inside the div, innerHTML would automagically convert that, but since it's all standard divs, it doesn't.)

Unfortunately, the <html> tag is only used "as the root element of a document, or wherever a subdocument fragment is allowed in a compound document." I expect innerHTML to emit that tag properly if its use is standards-conforming, but the example in your fiddle was not.

Scott Mermelstein
  • 15,174
  • 4
  • 48
  • 76
  • The Ace editor displays HTML code which may sometime include the `` tags. Is it not possible at all to show these tags? Also, the content needs to be HTML encoded ie `test` should be `<html>test</html>`. That functionality is achieved in the code from the referred post through functions (http://jsbin.com/ejuru/1/edit), and I'm trying to do it without functions. – user1063287 Jan 03 '14 at 16:00
  • @user1063287 I answered these issues to the best of my abilities in my edited answer. – Scott Mermelstein Jan 03 '14 at 16:18
0

I ran into lots of problems when trying to implement this.

Basically <html> tags were always stripped out and I couldn't find a way to access the html markup before the tags were stripped or to encode the html within the div containing the markup. jQuery's text() and html() and various combinations of them did not work.

Solution

This was the solution that eventually worked for me.

http://jsfiddle.net/rwone/rAFSZ/1/

HTML

<div id="my_html"></div>

<!-- this works using <xmp> tags and NOT when using <div> tags -->

<xmp id="my_html_hidden"><html>test</html></xmp>

jQuery

The approach I used was to set the value like this:

var html_editor = ace.edit("my_html");
// other editor settings
html_editor.session.setValue($("#my_html_hidden").text());

So the logic of this is that the content was loaded into a hidden div from the database, and then the value of the editor was set with the contents of this hidden div, with the text() method applied.

The key was that using <xmp> tags did NOT strip the <html> tags, whereas using <div> tags did.

user1063287
  • 10,265
  • 25
  • 122
  • 218