jQuery - escaping inline styles with HTML entities

Question

I came across a curious problem when attempting to insert HTML edited by a Javascript editor (CKEditor) into some div. In the HTML to be inserted, double-quotes are replaced by the HTML entity " which works fine.

EXCEPT if the " appears in an inline style - then jQuery removes the entire inline sytyle.

I don't want them to be removed. I do prefer to keep the HTML entities if possible. The question is why does this happen? Any workaround?

In below example, I insert a text which should make the span red with regular quotes and with HTML-entity escaped quotes in an inline style.

The first line (div1) makes the span red, div2 is not red at all.

   window.onload = function() {
 $('#div1').html('<span style="color:red;">This text "here" is red</span>, while this is not.' );
 $('#div2').html('<span style=&quot;color:red;&quot;>This text &quot;here&quot; is red</span>, while this is not.' ); }

See JSFiddle/L7cq2pfd here

div2 style is not valid style="color:red;" how do you get this style ? — Tasnim Reza
– Tasnim Reza, Commented Oct 18, 2015 at 8:52
CKEditor automatically does this, it adds inline styles when you edit. This is intended to help avoiding problems with texts containing quotes, but in this case it created a problem. — nepdev
– nepdev, Commented Oct 18, 2015 at 9:14

davidkonrad · Accepted Answer · 2015-10-18 09:10:44Z

2

jQuery inserts this as style=""color:red;"" - convert " to " with replace(/"/g, '"') before inserting as HTML :

$('#div2').html('<span style=&quot;color:red;&quot;>This text &quot;here&quot; is red</span>, while this is not.'.replace(/&quot;/g, '"') );

http://jsfiddle.net/kb709s27/

Why? The automatically rendering of a " to " is a browser feature, not a javascript feature. jQuery seems to parse the inserted HTML and tries to correct malformed attributes. If you insert

$('#div2').html('<span style=color:red>');

then jQuery corrects this and inserts <span style="color:red">. In your case jQuery only see a malformed attribute and therefore tries to correct it, wrapping "color:red;" into quotes.

edited Oct 18, 2015 at 9:10

answered Oct 18, 2015 at 8:54

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nepdev Over a year ago

Thanks - this makes it clear and is what I needed. I was missing that the automatic HTML rendering is not a Javascript feature.

Collectives™ on Stack Overflow

jQuery - escaping inline styles with HTML entities

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related