encoding/decoding html using javascript

Question

I am using Tinymce editor for formatting articles in my ASP.NET page.
here is my code:-

 <asp:TextBox runat="server" ID="textarea" Height="70px" 
        Width="324px" TextMode="MultiLine"></asp:TextBox><br />
    <asp:Button ID="submit" runat="server" Text="Button" 
    OnClientClick="encodeMyHtml()" onclick="submit_Click" CausesValidation="False"/>
</div>

and this is what i have find on the web for encoding html here and tried to use it.

function encodeMyHtml() {
    var htmlToEncode = document.getElementById("textarea").value;
    // save content after encoding
    alert(htmlToEncode);
    var encodedHtml = escape(htmlToEncode);
    alert(encodedHtml);
    // Later when displaying it back, decode it.
    var ohtml = unescape(encodedHtml);
    alert(ohtml);
}

and this also

   function encodeMyHtml() {
      var htmlText = document.getElementById('textarea').value;
      htmlText = htmlText.replace(/\</g, "&lt;");
      //alert("hello2");
      htmlText = htmlText.replace(/\>/g, "&gt;");
      alert(htmlText);
 }

but it's not working for me and it doesn't even display htmlToEncode value in alert() function. Everytime I click submit button, it display the following error

A potentially dangerous Request.Form value was detected from the client and etc..

Please help to figure out the Problem. I want to encode the HTML content and then store it into the database and then to retrieve it on another page.

Not answering your question, but I think generally we should store text in database as-is. Encode the text only when necessary (e.g. to display). — Passerby, Jul 12 '13 at 07:38
but asp.net doesnot allow to store html markup in database, that's why it's necessary to encode. — Sam, Jul 12 '13 at 07:42
[Check This Link. This question has been asked so many times.][1] [1]: http://stackoverflow.com/questions/1147359/how-to-decode-html-entities-using-jquery — Raghubar, Jul 12 '13 at 07:50
The second one you are using `document.createElement` not `document.getElementById`. — Hereblur, Jul 12 '13 at 07:50
Please check this link. this was asked so many times. http://stackoverflow.com/questions/5796718/html-entity-decode — Raghubar, Jul 12 '13 at 07:55
@hereblur: oops, that was by mistake,sorry for that. But I have also tried "getElementById('<%= textarea.ClientID %>').value;", it's also not working. — Sam, Jul 12 '13 at 08:02
@Raghubar: both of the links show decoding part, but my code fails to get the content of **textarea** for encoding. What to do for this ? — Sam, Jul 12 '13 at 08:15

Tim · Answer 1 · 2013-07-12T08:35:43.143

0

var text = document.getElementById("myTextarea").value;

// temporary element has all the native encoding capability you need
var p = document.createElement('p');

// set text and get back HTML
p.appendChild( document.createTextNode(text) );
var html = p.innerHTML;

// add line breaks to display in elements that don't preformat (like textarea does)
html = html.replace(/(\r\n|\n|\r)/g, '<br />' );

// set html and get back text
p.innerHTML = html;
text = p.textContent||p.innerText;

edited Jul 12 '13 at 08:35

answered Jul 12 '13 at 08:06

Tim

8,036
2
36
52

I am sorry, by mistake I place createElement over there, and corrected it. I am trying to retrieve the content of existing **textarea** and then trying to encode html part, but unable to do it. – Sam Jul 12 '13 at 08:17
It fails to get value from the **textarea**. I tried this `var text = document.getElementById("textarea").value; alert(text);` and the alert() pop-up window doesn't display anything. – Sam Jul 12 '13 at 08:31
good point. simply encoding won't create `
` elements. will update – Tim Jul 12 '13 at 08:33
does your textarea really have the id attribute of 'textarea'? – Tim Jul 12 '13 at 08:36
your problem getting the value of the textarea form element is a side issue to your encoding question. Once you've solved it, you'll find that the encoding code I've provided works. – Tim Jul 12 '13 at 08:50

score 0 · Answer 2 · answered Jul 21 '13 at 10:00

0

TinyMCE editor already encode tags written by user.

To decode those tags, you can use the following line

    var decodedHtml = $('<div/>').html(yourText).text();

answered Jul 21 '13 at 10:00

Peter T.

8,757
3
34
32

I think it doesn't. When I submit text under TinyMCE editor to database, .net framework stops the processing of website and give an XSS error. – Sam Jul 24 '13 at 17:31

encoding/decoding html using javascript

2 Answers2