JS 帮助有选择地将 html 转义到预览区域

Question

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

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

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

实际上，上面的代码可以正常工作，直到您开始输入 html。我想允许基本格式，例如粗体和斜体，以及支持添加 标记。

代码标签中的所有内容都需要只是文本，但上面的 jquery 告诉我所有的输出/预览文本都以 html 格式输入 - 所以无论我输入“<”还是“<”。

我尝试了.replace(/</,"<") 方法和 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

允许选择性 html 存在许多缺陷。因为，用你自己的话说，你还在学习，我建议你走另一条路。

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

这会让你更容易控制。

Answer 4

查看 innerText (IE) 和 textContent (w3c) DOM 属性。他们只设置/检索文本，而不是标签和 cmets。

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

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