将一个html标记 转 json串

 /**
 * 将一个html标记 转 json串
 * @param {String} html 要处理的html标签。html串必须有且仅有一个根节点。
 * @param {int} indent_str_count 起始缩进符个数
 * @param {String} indent_str 缩进符,默认tab键
 * @param {Object} indent 缩进对象
 * @return {String} json
 *                 {
 *                     "tag": "标签名",
 *                     "attrs": {"属性名": "属性值", ...},
 *                     "content": ["标签内容" | json  | [json数组]]    
 *                 }
 *         出错返回结果: {"error": "html串必须包括一个根节点"}
 * @test 嵌套(nested):html2json("<table><tr><td class=\"popupmenu_option\" οnclick=\"Do('detail')\">详细结构</td></tr><tr><td class=\"popupmenu_option\" οnclick=\"Do('rawdata')\">原始邮件</td><tr><td class=\"popupmenu_option\" οnclick=\"Do('detail')\">详细结构</td></tr></tr></table>")
 * @test 同级(sibling):html2json("<tr><td class=\"popupmenu_option\" οnclick=\"Do('detail')\">详细结构</td></tr><tr><td class=\"popupmenu_option\" οnclick=\"Do('rawdata')\">原始邮件</td></tr>")
 * @create xiaolong8 @ 2012-6-7 16:30:48
 * @modify [content字段的文本添加对"进行替换为\"的转义形式] by [堅] @ [2012-6-8 9:03:36]
 * @modify [content字段添加:对标签内容若仍为html标签,则继续转json] by [堅] @ [2012-6-8 9:22:32]
 * @modify [添加json串缩进显示] by [堅] @ [2012-6-8 11:54:27]
 * @modify [属性组(attrs)JSON生成时,按空格分离属性到数组(.split(/\s+/))的方式改为按正则匹配到数组(.match(/\w+=(?:"(?:[^"]|(?:\"))+?"|'(?:[^']|(?:\'))+?')/g);)的方式] by [堅] @ [2012年6月11日11:51:56]
 * @modify [添加对用户传入的html串做根/嵌套标签和同级标签的处理] by [堅] @ [2012-6-11 17:25:07]
 * @modify [log] by [user] @ [time]
 * @TODO: input img 这类单行标签未处理
 */
function html2json(html, indent_str_count, indent_str, indent) {
    /// 常量设置
    var HTML_TAG_NAME = "tag";
    var HTML_TAG_ATTRIBUTES = "attrs";
    var HTML_TAG_CONTENT = "content";
    // HTML元素组
    var htmlEls = null;
    // 是否首次(非递归)执行。indent为空说明是首次调用
    var isFirstRun = indent ? false : true;
    
    /// 验证是否为字符串,若是去除其前后导空格
    if (!html || typeof(html) != "string") {
        return null;
    }
    String.prototype.trim = String.prototype.trim || 
                function(){return this.replace(/^\s+|\s+$/g, "");};
    html = html.trim();
    
    /// 同级标签解析,若match后长度等于1,说明不是同级标签 */
    htmlEls = html.match(/<(\w+)([^>]*)>(.*?)<\/\1>/gi);
    if (!htmlEls) {
        // 首次调用(非递归),即html不符合要求,直接返null;否则生成content字段的内容并返回
        return isFirstRun ? null : "\"" + html.replace(/\"/g, "\\\"") + "\"";
    }
        
        /// 设置各种默认值
    // 默认缩进1个字符
    indent_str_count = indent_str_count || 1;
    // 默认缩进字符为tab键
    indent_str = indent_str || "\t";
        // 缩进对象(共用)
    indent = indent || {
            "strings": [],
            "str": indent_str,
             /**
             * 获取count个缩进字符
             * p.s. 写完发现这个貌似有点像传说中的享元模式,昨天刚看的,没想到无意中写出来了。
             *      于是果断把函数名由get改为了factory。
             *      strings数组里存放的就是共享的缩进单元,相同个数的缩进符 共享 同一个缩进单元。
             *      如,factory(5)都是 共享 strings[4]单元。
             * @param {int} count
             * @return {String} count个缩进字符
             * @test 
             * @create 堅 @ 2012-6-8 10:26:32
             * @modify [log] by [user] @ [time]
             */
            "factory": function(count) {
                         var index = count - 1;
                         if (!this.strings[index]) {
                             var string = new Array(count + 1).join(this.str);
                             this.strings[index] = string;
                         }
                         return this.strings[index];
                },
            "getIndentStr": function() {
                    return this.str || "\t";;
                }
        };
    
    if (htmlEls.length > 1) {
    /// html串内含多个同级标签
        if (isFirstRun) {
            // 用户传进的html串为同级标签。
            return {"error": "html串必须包括一个根节点"};
        }
    var elsJson = "["
    for (var i = 0; ; i++) {
        elsJson += html2json(htmlEls[i], indent_str_count + 1, indent.getIndentStr(), indent);
        if (i >= htmlEls.length -1) {
            elsJson += "\n";
            break;
        }
        elsJson += ", ";
    }
    elsJson += indent.factory(indent_str_count - 1) + "]";
    return elsJson;
    } else if (htmlEls.length == 1) {
        /// html串为一个根标签 或是 一组嵌套标签
        // 根标签或嵌套标签解析
        htmlEls = html.match(/^\s*<(\w+)([^>]*)>(.*)<\/\1>\s*$/gi);
        var tag = RegExp.$1;
        var content = RegExp.$3;
        var attrs = RegExp.$2.trim().match(/\w+=(?:"(?:[^"]|(?:\"))+?"|'(?:[^']|(?:\'))+?')/g);
    var json = "";
    
    json = "{\n" +
        indent.factory(indent_str_count) + "\"" + HTML_TAG_NAME + "\": \"" + tag + "\", \n" +
        indent.factory(indent_str_count) + "\"" + HTML_TAG_ATTRIBUTES + "\": " + 
            (function() {
                var attrsJson = "\"\"";
                if (attrs && attrs.length) {
                    attrsJson = "{\n";
                    for (var i = 0; ; i++) {
                        attrPair = attrs[i].split("=");
                        name = attrPair[0];
                        value = attrPair[1].replace(/^['"]?|['"]?$/g, "");
                        attrsJson += indent.factory(indent_str_count + 1) + 
                                        "\"" + name + "\": \"" + value + "\"";
                        if (i >= attrs.length - 1) {
                            attrsJson += "\n";
                            break;
                        }
                        attrsJson += ", \n";
                    }
                    attrsJson += indent.factory(indent_str_count)+ "}";
                }
                return attrsJson;
            })()  + ", \n" +
        indent.factory(indent_str_count) + "\"" + HTML_TAG_CONTENT + "\": " + 
            html2json(content, indent_str_count + 1, indent.getIndentStr(), indent) + "\n" + 
        indent.factory(indent_str_count-1) + "}";
        return json;
    }
}


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值