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

Question

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

我正在用一个简单的文本区域编辑器构建一个论坛，并且想要一个在您键入时更新的预览区域，就像它在 stackoverflow 上所做的那样。

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

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

代码标签内的所有内容都必须是文本，但上面的 jquery 告诉我所有的输出/预览文本都以 html 的形式传递 - 所以无论我输入“<”还是“<”。

我试过了.replace(/</,"&lt;")方法和 RegEx 方法，但似乎还没有任何效果。

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

非常感谢

Answer 1

在这种情况下，您不需要允许 html 并像浏览器那样仁慈。您的实现可以非常严格!

当你非常严格时，你的格式化工作就很容易了。例如，您只能接受此语法[tag=parameter] 和[/tag]，其中tag 可以是u,i, b,c(c 表示颜色)和参数可以是除 ] 之外的任何内容或/和使用不应在普通文本中经常出现的特殊字符。

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

[代码]用于多行 block (不能与其他组合)

` 用于内联代码块(不能与其他代码组合)

* 用于粗体文本

** 用于斜体

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

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