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...

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...

• javascript
• html
• textarea
• newline
• string-formatting

Share Improve this question Follow edited Sep 7, 2011 at 17:16 inhan asked Sep 7, 2011 at 15:15 inhaninhan 7,49022 gold badges2525 silver badges3535 bronze badges 2

• possible duplicate of RegEx match open tags except XHTML self-contained tags – Naftali Commented Sep 7, 2011 at 17:17
• What exactly is the relevance? – inhan Commented Sep 7, 2011 at 17:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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));

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 />");

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

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

How about ubb code instead?

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