Cannot use CSS '#' symbol in iframe

Question

Scenario

I have created a simple iframe which i am dynamically generating from user provided HTML and CSS.

JSfiddle

https://jsfiddle.net/jaup3769/1/

Problem

Whenever I use the '#' symbol, CSS parsing is stopped beyond that point.

p#para1{

}

won't parse beyond p#

Similarly,

p{
 color: green;
 background-color: #ff0000;
}

won't parse beyond background-color: #

What might be the issue?

Answer 1

Just use encodeURIComponent instead of encodeURI. From the MDN article:

encodeURIComponent differ from encodeURI in that it encode reserved characters and Number sign #

I think it even makes more sense to use it in the code you provided, since you are not encoding the whole URI, the data:whatever/charset:… part is already there…

• MDN article
• JSfiddle
• related SO question