Преобразование текстовой новой строки в <p>итеги по JavaScript - PullRequest
Новая
       31

Преобразование текстовой новой строки в <p>итеги по JavaScript

4 голосов
/ 07 сентября 2011

Я использую текстовое поле в HTML-форме и пытаюсь переформатировать его содержимое в допустимый HTML-формат, используя теги <p> и <br/>.

Я написал этот скрипт, и онкажется, работает, но я хотел убедиться, что я ничего не пропускаю.Поэтому я прошу отзывы.Мне известно, что я не принимаю во внимание возможность того, что пользователь может явно вводить HTML-теги, но это не проблема, потому что я все равно буду выдавать результат в PHP.

Заранее спасибо.

Пример вывода: 

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

и код: 

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

}

Обратите внимание, что этот код предназначен для использования в CMS, и всеJavaScript должен перестроить результат textarea с этими двумя тегами.Вид проблемы WYSIWYG ...

Ответы [ 3 ]

6 голосов
/ 21 января 2013

Вот что я придумал. 

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
}

Все, что вам нужно сделать, это вызвать эту функцию со значением текстовой области. 

var ta = document.getElementsByTagName('textarea')[0];
console.log(encode4HTML(ta.value));
0 голосов
/ 07 сентября 2011

Омг, вы пытаетесь передать html-код в бэкэнд?Это то, что мы называем дырой в XSS.

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

А как насчет кода убб?

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

0 голосов
/ 07 сентября 2011 
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 />");
...