CODEWITHSUNDEEP
javascripthtmltextareanewlinestring-formatting
inhan
inhan

Reputation: 7470

Converting textarea newlines into <p> and <br/> tags by JavaScript

I'm using a textarea in an html form and I'm trying to reformat its content into a valid html format by using <p> and <br/> tags.

I wrote this script and it seems to work but I wanted to make sure I'm not missing anything. So I'm asking for feedback. I'm aware that I'm not taking into consideration the possibility that the user might explicitly input html tags, but that's no problem because I'll be issuing the result in PHP anyway.

Thanks in advance.

An example to the output:

<p>Line 1<br/>Line 2</p><p>Line 4<br/><br/><br/>Line 7</p>

and the code:

function getHTML() {

    var v = document.forms[0]['txtArea'].value;
    v = v.replace(/\r?\n/gm, '<br/>');
    v = v.replace(/(?!<br\/>)(.{5})<br\/><br\/>(?!<br\/>)/gi, '$1</p><p>');
    if (v.indexOf("<p>") > v.indexOf("</p>")) v = "<p>" + v;
    if (v.lastIndexOf("</p>") < v.lastIndexOf("<p>")) v += "</p>";
    if (v.length > 1 && v.indexOf("<p>") == -1) v = "<p>" + v + "</p>";
    alert(v);

}

Please note that this is a code meant to be part of a CMS and all I care to do by JavaScript is to rebuild the textarea result with those 2 tags. Kind of WYSIWYG issue...

Upvotes: 5

Views: 5012

Answers (3)

inhan
inhan

Reputation: 7470

Here's what I came up with.

function encode4HTML(str) {
    return str
        .replace(/\r\n?/g,'\n')
        // normalize newlines - I'm not sure how these
        // are parsed in PC's. In Mac's they're \n's
        .replace(/(^((?!\n)\s)+|((?!\n)\s)+$)/gm,'')
        // trim each line
        .replace(/(?!\n)\s+/g,' ')
        // reduce multiple spaces to 2 (like in "a    b")
        .replace(/^\n+|\n+$/g,'')
        // trim the whole string
        .replace(/[<>&"']/g,function(a) {
        // replace these signs with encoded versions
            switch (a) {
                case '<'    : return '&lt;';
                case '>'    : return '&gt;';
                case '&'    : return '&amp;';
                case '"'    : return '&quot;';
                case '\''   : return '&apos;';
            }
        })
        .replace(/\n{2,}/g,'</p><p>')
        // replace 2 or more consecutive empty lines with these
        .replace(/\n/g,'<br />')
        // replace single newline symbols with the <br /> entity
        .replace(/^(.+?)$/,'<p>$1</p>');
        // wrap all the string into <p> tags
        // if there's at least 1 non-empty character
}

All you need to do is call this function with the value of the textarea.

var ta = document.getElementsByTagName('textarea')[0];
console.log(encode4HTML(ta.value));

Upvotes: 6

OpenGG
OpenGG

Reputation: 4540

Omg, you are trying to pass html code to the backend? That is what we call a XSS hole.

http://en.wikipedia.org/wiki/Cross-site_scripting

How about ubb code instead?

http://en.wikipedia.org/wiki/UBB.threads

Upvotes: -1

Mike Samuel
Mike Samuel

Reputation: 120486

v = v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
    .replace(/([^\r\n]+)\r?\n\r?\n/g, "<p>$1</p>")
    .replace(/\r?\n/g, "<br />");

Upvotes: 0

Related Questions