用HTML元素替换文本标记

Question

查看像DIV这样的HTML元素并用HTML元素替换特定文本的最佳方法是什么.例如,假设我们有令牌[b]和[/b].我想分别用<b>和替换它们</b>.

我得到这个最接近的工作就是下面的例子.

HTML to teplace:

<div id="response">This is some [b]GREAT[/b] stuff!</div>

---

示例#1:

$('#response').html(function() {
    return $(this).text().replace('[b]', '<b>');
});
$('#response').html(function () {
    return $(this).text().replace('[/b]', '</b>');
});

结果#1:

这是一些很棒的东西!

---

示例#2:

$('#response').html(function() {
    return $(this).text().replace('[b]', $('<b>'));
});
$('#response').html(function () {
    return $(this).text().replace('[/b]', $('</b>'));
});

结果#2:

这是一些[object Object] GREAT [object Object]的东西!

---

期望的结果:

这是一些很棒的东西!

两者都不起作用.前者只是将标记替换为空,而后者用浏览器中的对象替换它,而不是根据需要替换HTML元素.

Answer 1

使用正则表达式应该很好:

$('#response').html(function() {
    return $(this).text().replace(/\[(\/?\w+)\]/g, "<$1>");
});

好处是所有令牌都可以替换,而无需单独命名.

请注意,这为跨站点脚本攻击打开了大门!

如果你想在这个过程中(如转换令牌[b]来<strong>)和白名单他们(你肯定要列入白名单他们migitate XSS漏洞),使用回调函数作为替代,就像这样:

$('#response').html(function () {
    var map = {
        b: "strong",
        i: "em",
        p: "p"
    };
    return $(this).text().replace(/\[(\/?)(\w+)\]/g, function ($0, $1, $2) {
        if (map.hasOwnProperty($2)) {
            return "<" + $1 + map[$2] + ">";
        } else {
            return $0;
        }
    });
});

为了使这个jQuery成为答案,这里是如何将所有这些转换为花哨的jQuery插件以供重用:

$.fn.extend({
    unphpbb: (function () {
        var map = {
               b: "strong",
               i: "em",
               p: "p"
            },
            tokens = /\[(\/?)(\w+)\]/g,
            replacement = function ($0, $1, $2) {
                return map.hasOwnProperty($2) ? "<" + $1 + map[$2] + ">" : $0;
            },
            replaceTokens = function (i, html) {
                return html.replace(tokens, replacement);
            };

        return function () {
            return this.html(replaceTokens);
        };
    })()
});

用作

$("#response").unphpbb();

当然,在服务器上使用bbcode解析器并将正确擦除的HTML发送到客户端是解决此问题的首选方法.在具有上述功能的客户端上执行此操作在各方面都是劣等的.