Encoding in JavaScript problem

Posted on 2011-10-31
Last Modified: 2012-05-12

I am trying to achieve 2 things:

a) Encode or escape text from a <TEXTAREA tag to store in SQL Server, thereby allowing singles quotes etc., to be easiliy stored in the database with no problems.

b) Also, although the text is initially captured using a <TEXTAREA tag, with it's carriage returns etc. I need to return the text from the database but into another control other than a <TEXTARA, ie DIV, SPAN, LABEL, etc and still preserve paragraph breaks etc.

Please look at my code. I'm trying encodeURIComponent/decodeURIComponent but with no success. It seems the only way to replicate the original <TEXTAREA formatting is to re-display into another <TEXTAREA, which I don't won't do.

Is there a sensible way to achieve this ?


<html xmlns="" >
<title>Untitled Page</title>
<script type="text/javascript">

	function fnGo1() {

		var txtBox = document.getElementById("txtBox").value;
		var CodedText = encodeURIComponent(txtBox);
		document.getElementById("secOut").innerHTML = decodeURIComponent(CodedText);
		document.getElementById("lab1").innerHTML = decodeURIComponent(CodedText);
		document.getElementById("spnBox").innerHTML = decodeURIComponent(CodedText);
<input type="button" value=" go " onclick="fnGo1()" />
<p />
<textarea id='txtBox' cols='30' rows='10'></textarea>
<p />
DIV Result:<div id='secOut'></div>
<p />
LABEL Result:<label id='lab1'></label>
<p />
SPAN Result:<span id='spnBox'></span>


Open in new window

Question by:jonatec
    LVL 35

    Expert Comment

    by:Robert Schutt
    It's probably not the end-solution but as a start, have you tried using innerText instead of innerHTML? Do you need HTML tags in the text? If yes, are you aware of the danger?

    You can also add this after decodeURIComponent(CodedText):

    .replace("\n", "<br>")

    Open in new window


    Author Comment

    Hi. Well I'm open to suggestions, given what I'm trying to achieve.

    I can replace the single quote before it hits the database, that's not a problem. I am trying to replicate a paragraph in the text created by the user when the text is initially keyed into a textarea,

    LVL 35

    Accepted Solution

    Then I would say try that second option, for example:

    document.getElementById("spnBox").innerHTML = decodeURIComponent(CodedText).replace("\n", "<"+"br>");

    Open in new window

    (I broke up the br tag because it seemed to break the code div in preview...)

    Possibly other replacements are necessary, you could make a generic function containing any decoding you want for reusability, could you give an example of 'difficult' text you can expect in the textbox?

    Author Comment


    Yes, certainly:

    Fred's new scheme contains a single quote.


    has many
    line breaks.

    LVL 35

    Assisted Solution

    by:Robert Schutt
    The quote seems ok to me.

    The multiple line-breaks can be done with a regular expression:

    var decodedText = decodeURIComponent(CodedText).replace(/\n/g, "<br>");

    Author Closing Comment

    Excellent thanks !

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now