Question

我已经有一段时间没遇到这个问题，似乎没有人能够完全回答我......

我正在使用简单的textarea编辑器构建一个论坛，并希望在您键入时更新预览区域，就像在stackoverflow中一样。

    var text = $("#edit").val();
    $("#preview").html(text);

实际上，上面的代码工作正常，直到你开始输入html。我想允许基本格式，如粗体和斜体，以及支持添加＆lt; code＆gt;标签

在代码标签中需要只需要TEXT，但上面的jquery告诉我所有的输出/预览文本都是以html形式传递的 - 所以我是否把“<”或“{{1 }}”。

我尝试了<方法和RegEx方法，但似乎没有任何工作。

我正在寻找与预览区域如何工作非常类似的东西 - 如果这有任何帮助 - 但我希望有人能够阐明我如何做到这一点。

非常感谢

Answer 1

在这种情况下，您不需要允许html并且像浏览器一样仁慈。您的实施可能极其严格！

当您非常严格时，您的格式化工作非常简单。例如，您只能接受[tag=parameter]和[/tag]这样的语法，其中tag可以是u,i,b,c（c代表颜色），参数可以是]或/之外的任何内容并使用普通文本中不应出现的特殊字符。

然后，您可以创建一些规则，为它们分配优先级并根据该优先级处理文本。

[code]用于多行块（不能与其他块组合）
`用于内联代码块（不能与其他代码块组合）

*用于加粗文字
**用于斜体文字

现在您只需在代码中找到标签并相应地格式化文本：

function textify(text) { return $('<div/>').text(text).html(); }

function formatText(text)
{
    if (text == '') return '';

  var start = text.indexOf('[code]');
    var end = text.indexOf('[/code]', start);
    if ((end > start) && (start >= 0))
    {
        return formatText(text.substring(0, start))
            + '<pre>'
            + text.substring(start + 6, end)
            + '</pre>'
            + formatText(text.substring(end + 7));
    }

  text = text.replace(new RegExp('(^|\\s|>)\\*\\*(\\S.*?\\S)\\*\\*($|\\s|<)', 'gim') , '$1<strong>$2</strong>$3');
  text = text.replace(new RegExp('(^|\\s|>)\\*(\\S.*?\\S)\\*($|\\s|<)', 'gim') , '$1<em>$2</em>$3');

    return text;
}

在您的事件处理程序中：

$("#preview").html(formatText(textify(text)));

Answer 2

请查看http://code.google.com/p/google-caja/wiki/JsHtmlSanitizer，了解用JavaScript编写的独立HTML清理程序。

Answer 3

查看innerText（IE）和textContent（w3c）DOM属性。他们只设置/检索文本，而不是标签和评论。

http://blog.coderlab.us/2006/04/18/the-textcontent-and-innertext-properties/

编辑：我刚注意到你想要一些 HTML。在这种情况下，您需要一个比您自己编写的更复杂的解决方案。您需要调查ckeditor等现有解决方案。我相信这里使用的堆栈溢出也是开源的，但我不确定它的名称是什么，或者你在哪里找到文档。我可以推荐ckeditor，它功能非常强大，支持对允许的标签进行选择性过滤。

Answer 4

允许选择性html有很多陷阱。因为，按照你自己的说法，你还在学习，我建议你采取另一种方式。

不是允许选择性html，而是创建自己的语法 like bbcode ，然后将其转换为您允许的标记。

这对你来说更容易控制。

JS帮助有选择地将html转换为预览区域

4 个答案: