logo标签列表

用JavaScript将文本区域的换行符转换为<p>和<br/>标签

javascripthtmltextareanewlinestring-formatting
5
我正在使用一个html表单中的文本区域，并试图通过使用<p>和<br/>标签将其内容重新格式化为有效的html格式。
我编写了这个脚本，它似乎可以工作，但我想确保我没有遗漏任何东西。所以我请求反馈。我知道我没有考虑到用户可能会明确输入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重建带有这两个标记的文本区域结果。有点所见即所得的问题...
可能是RegEx匹配开放标签，除了XHTML自包含标签的重复问题。 - Naftali
什么是相关性？ - inhan
3个回答
6

这是我想到的。

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
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 />");
谢谢，但这种格式会产生不同的结果。我想创建一个所见即所得的区域。 - inhan
你能具体说明一下吗？这个问题在哪里不符合所见即所得？ - Mike Samuel
结果。尝试使用文本区域查看结果。换行符与文本区域的不同。 - inhan
-1
那不是公共页面。只是我正在编写的CMS页面。 - inhan
将HTML发送到后端，无论是公开还是私下，都是完全可以的。你认为一些评论框和论坛主题编辑器是如何将格式化的HTML帖子发送到后端数据库的？！你应该担心的是将HTML传递给前端！只要在使用之前彻底验证HTML，例如使用http://www.htmlpurifier.org或一些PHP内置函数（根据要求），那么它就被认为是相对安全的，至少目前是这样。如果你非常担心，可以在保存HTML字符串到数据库之前验证它。 - TheCarver
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接