jQuery替换HTML模板

    今天做项目需要将表单的HTML用jQuery替换以字符串的形式存入数据库,以下是本人写js脚本文件所整理的思路,仅供参考!

  一、首先要将常用的HTML标签统一替换,如:select,input等

  二、特殊的标签要做特殊处理,如input的单选,img图片等等

实例代码:

/**
 * Created by bayayun on 2016/3/28.
 * 模板替换
 */
function copyForm(el) {
    /*获取表单的HTML代码*/
    var form = $(el).html();
    $('#hideWrap').html('');
    $('#hideWrap').html(form);
    $("input[name='_ajax']","#hideWrap").remove();
    /*替换单选框*/
    var rideo = $("input[type='radio']", el);
    $("#hideWrap input[type='radio']").each(function (s){
        var rad = $(rideo[s]).is(":checked");
        if(rad){
            /*删除当前节点除外的所有兄弟节点的父级节点*/
           $(this).closest('label').siblings().remove();
           $(this).closest('span').remove();
        }
    });
    //console.log($('#hideWrap').html());
    /*原表单值 处理input*/
    var source = $('input', el);
    $('#hideWrap input').each(function (i) {
        var inputval = $(source[i]).val();
        var type = $(this).attr('type');
        /*如果input的type属性是隐藏就删除*/
        if(type !== 'hidden'){
            var str = '';
            if (inputval != '') {
                str += "<span>" + inputval + "</span>";
            } else {
                str += "<span>&nbsp;&nbsp;</span>";
            }
            $(this).replaceWith($(str));

        }else{
            $(this).remove();
        }

    });
    //console.log($('#hideWrap').html());
    /*原表单值 处理图片 获取显示值替换标签*/
    $('#hideWrap .form-actions').remove();
    /*处理联动select*/
    $('#hideWrap .mcSelect').each(function(){
        $(this).replaceWith($(this).html());
    });
    /*原表单值 处理select 获取select option:select 显示值*/
    var seled = $('select option:selected', el);
    var selects = $('select', el);
    $('#hideWrap select').each(function (e){
        var selval = $(selects[e]).val();
        var sel = '';
        if(selval){
            var seledval = $(seled[e]).text();
            if(seledval){
                sel += "<span>" + seledval + "</span>";
            }
        }else{
            sel += "<span>&nbsp;&nbsp;</span>";
        }
        $(this).replaceWith($(sel));
    });
    /*原表单值 处理textarea 获取显示值替换标签*/
    var textar = $('textarea',el);
    $('#hideWrap textarea').each(function (d){
        var textval = $(textar[d]).val();
        var texts = '';
        if(textval){
            texts += "<p>" + textval + "</p>";
        }else{
            texts += "<p>&nbsp;&nbsp;</p>";
        }
        $(this).replaceWith($(texts));
    });

    /* 
     *
     * 循环遍历图片
     * author wyh
     * */
    var imgval = '';
    var imgstr = '';
    $('#hideWrap .hiduploader img').each(function(){
      if (typeof($(this).attr('alt')) !== 'undefined') {
        imgval = $(this).attr('src');
        if (imgval != '') {
          imgstr = "<div class='thumbnail'> <img alt='"+$(this).attr('alt')+"' src="+imgval+" class='img-reponsetive'></div>";
        } else {
           imgstr = "<img alt='' src='/frame/public/assets/global/img/none.png' class='img-reponsetive'>";
        }
        $(this).closest('.hiduploader').html(imgstr);
      }
    });

    var formhtml = $('#hideWrap').html();
    $("input[name='formhtml']", el).val(formhtml);
}
原文地址:https://www.cnblogs.com/520fyl/p/5443361.html