easyui-datagrid行数据field原样输出html标签

最新推荐文章于 2021-06-25 12:21:51 发布

转载最新推荐文章于 2021-06-25 12:21:51 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/384094

文章标签：

#javascript #ViewUI

本文介绍如何在EasyUI的Datagrid组件中通过自定义formatter安全地显示包含HTML标签的内容，防止XSS攻击，同时提供了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

easyui-datagrid 绑定的行 field 原样输出html标签。处理效果如图：

Html页面代码如下：

...

<tr>

        <th field="id" width="5" align="center">编号</th>

        <th field="name" width="20" align="center" data-options="formatter:formatEncodeHtml">名称</th>
...

处理的js代码如下：

function formatEncodeHtml(value, row, index) {

    return encodeHtml(value);
}

this.REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;
function encodeHtml(s) {

    return (typeof s != "string") ? s :

            s.replace(this.REGX_HTML_ENCODE,

                    function ($0) {

                        var c = $0.charCodeAt(0), r = ["&#"];

                        c = (c == 0x20) ? 0xA0 : c;

                        r.push(c);

                        r.push(";");

                        return r.join("");

                    });
}