python 格式化html + js/jq 格式化html

格式化用户输入（尤其是粘贴），成标准文章格式（可以自己定制，修改最后的css样式）

在用户粘贴文章进来的时候，自己的文本编辑框有问题，因为复制网页上的东西，大部分都是带有格式的。而且各种恶心的自定义标签，加大了难度。

话不多说，代码有啥问题，可以交流，重点是后端的python代码。

1、前端获取粘贴之后的数据（因为环境不一样，安卓获取不到粘贴板），然后先简单的去除下格式 

v3ui_richdiv 是我们自己插件

{# paste事件中添加清除格式，然后再进行覆盖原来粘贴的内容，避免各种各样不规则文本#}

document.querySelector(".v3ui_richdiv").addEventListener("paste", function(e) {
    setTimeout(function() {
        $('.v3ui_richdiv' ).v3ui_richdiv('html' , filter_html());
        document.execCommand("selectAll");
        document.execCommand("removeFormat");
        //很奇怪，有时候remove一次，会有遗漏，再来一次
        document.execCommand("removeFormat");
        document.execCommand("unlink");
        document.execCommand("justifyLeft");
        document.execCommand("unselect");
        $('.v3ui_richdiv').find('*').removeAttr('class').removeAttr('style');
        //把光标移到文本末尾
        msgTextLastPos(document.querySelector(".v3ui_richdiv"));
    }, 0);
});

//移动光标至文本框末尾
function msgTextLastPos(obj) {
    // 解决浏览器的兼容问题，做如下条件判断
    if (window.getSelection) {
        obj.focus();
        var range = window.getSelection();
        range.selectAllChildren(obj);
        range.collapseToEnd();//光标移至最后
    }
    else if (document.selection) {
        var range = document.selection.createRange();
        range.moveToElementText(obj);
        range.collapse(false);//光标移至最后
        range.select();
    }
}

2、这段python代码是核心，去除格式，拿到数据，然后添加文章样式。

def filter_html(ct_comment):
    def replace_unvisiable(content):
        for one in [u'\u3000', u'\u0020', u'\u0009', u'\u000b',u'\u000c',u'\u00a0', u'\u000a',u'\u000d',u'\u2028', u'\u2029',u'\u200f',u'\u200e',u'\u200d',u'\ufeff']:
            content = content.replace(one, '')
        else:
            return content.strip()
    ct_comment = smart_decode(ct_comment)
    for tag in [ ' ','"', ' ', ' ', ' ', '‌', '‍']:
        ct_comment = ct_comment.replace(tag, '')

    # for tag in [ '
', '
', '
', '
', ]:
    #     ct_comment = ct_comment.replace(tag, '')

    ct_comment = pq(ct_comment)
    # 去除某些不要的标签
    ct_comment('img').remove()
    ct_comment('video').remove()
    ct_comment('style').remove()
    ct_comment('script').remove()

    # 批量 去除常用属性
    all_tags = ct_comment('*')
    p_div = ['']
    for one_tag in all_tags:
        # print one_tag.tag, "\t\t\t", one_tag.text, "\t\t\t", one_tag.tail
        if one_tag.tag in ['p', 'div', 'br']:
            if one_tag.text:
                p_div.append(one_tag.text)
            if one_tag.tail:
                p_div.append(one_tag.tail)
            if not one_tag.text and not one_tag.tail:
                p_div.append('')
        elif one_tag.tag in ['tr']:
            p_div.append('')
        else:
            if one_tag.text:
                p_div[len(p_div)-1] += one_tag.text
            if one_tag.tail:
                p_div[len(p_div)-1] += one_tag.tail

    p_div = [replace_unvisiable(one) for one in p_div if one]
    ct_comment = ''.join(["
"+ one.strip() + "
" for one in p_div if one])
    # for one in p_div :
    #     if one:
    #         print one.strip()
    # else:
    #     print '*'*250

    # 添加属性
    if '' in ct_comment:
        ct_comment.replace('', '')
    ct_comment += ' '

    return ct_comment

3、根据后端逻辑，用js实现了后端的格式化操作，但是总是有问题，问题主要在获取标签的时候，外层会把子标签的内容也加上。目前没有想到很好的办法。所以这段代码是有问题

 function filter_html(){
        var ct_comment = $('.v3ui_richdiv').v3ui_richdiv('val');
        $('.v3ui_richdiv' ).v3ui_richdiv('html' , "");
        $.each([ ' ','"', ' ', ' ', ' ', '‌', '‍', '
', '
', '
', '
'], function(index, tag){
            ct_comment = ct_comment.replace(tag, '')
        });


        ct_comment = $(ct_comment).find('*');
        var p_div = [''];
        if(ct_comment.length == 0){
            p_div.push(ct_comment)
        }else{
            // 去除某些不要的标签
            ct_comment.find('img').empty();
            ct_comment.find('video').empty();
            ct_comment.find('style').empty();
            ct_comment.find('script').empty();




            $.each(ct_comment, function(index, one_tag){
                if(contains(['p', 'div'], one_tag.tagName.toLowerCase())){
                     if (one_tag.innerText){
                         console.log(one_tag.tagName.toLowerCase() +  "    " +one_tag.innerText)
                     }
                }else if(contains(['tr'], one_tag.tagName.toLowerCase())){
                    return true
                }else if(contains(['table', 'tbody'], one_tag.tagName.toLowerCase())){
                    return true;
                }else{
                    if (one_tag.innerText){
                        console.log(one_tag.tagName.toLowerCase() +  "    " +one_tag.innerText)
                    }
                }
            });






            $.each(ct_comment, function(index, one_tag){
                if(contains(['p', 'div'], one_tag.tagName.toLowerCase())){
                     if (one_tag.innerText){
                         p_div.push(one_tag.innerText)
                     }
                }else if(contains(['tr'], one_tag.tagName.toLowerCase())){
                    p_div.push('')
                }else if(contains(['table', 'tbody'], one_tag.tagName.toLowerCase())){
                    return true;
                }else{
                    if (one_tag.innerText){
                        p_div[p_div.length-1] += one_tag.innerText
                    }
                }
            });
        }




        ct_comment = '';
        $.each(p_div, function(index, one){
            if(one && $.trim(one)){
               ct_comment += "

"+ $.trim(one) + "

";
            }
        });


        return ct_comment
    }


       {#判断一个数据是不是在数组中#}
    function contains(arr, obj) {
      var i = arr.length;
      while (i--) {
        if (arr[i].toString() == obj.toString()) {
          return true;
        }
      }
      return false;
    }


    {#检查字串#}
    function isContains(str, substr) {
        return str.indexOf(substr) >= 0;
    }