将html转换为jQuery格式的脚本

Question

我正在尝试编写一个快速的javascript程序，将HTML转换为jQuery格式，因为我不喜欢在代码中粘贴HTML，每次我需要创建动态但已经有的东西将html转换为jQuery格式变得乏味html，来自预先编写的模板ect（加上html实际写得更好）。

警告：它的编写非常糟糕，我试图快速完成它并且它几乎就在我的目的，只是有点卡在最后一个递归位。

javascript：

var openTag = false;
var openQuote = false;
var openQuotePlace = 0;
var lastSpace = 0;
var startToken = 0;
var html =''
var attrs = {}
const domElements = []
var firstSpace = true;
var attr = '';

var rootElement = null;
for(var i = 0; i < input.length;i++){

    if(input[i] == '<'){
        openTag = true;
        startToken = i+1;
        firstSpace = true;
    }

    if(openTag && ((i+1) < input.length && input[(i+1)] == '/')){
        openTag = false;
        startToken = 0;
        html = '';
        attrs = {}
        openQuote = false;
        openQuotePlace = 0;

    }

    if(openTag && input[i] == '>'){
        console.log('here')
        openTag = false
        startToken = 0;
        const obj = {jQuery:'$(\'<'+ html + '>\',' + JSON.stringify(attrs) + ')',children:[]}

        if(!rootElement)
            rootElement = obj;
        else if(html){
            rootElement.children.push(obj);
            domElements.push(rootElement);
            rootElement = obj;
        }
        html = '';
        attrs = {}
        openQuote = false;
        openQuotePlace = 0;
    }

    if(openTag && (input[i] == "\"" || input[i] == "'")){
        openQuote = !openQuote;
        if(openQuote){
            openQuotePlace = i;
        }else{
            if(openQuotePlace != 0){
                attrs[attr] = input.substring(openQuotePlace+1,i);
                openQuotePlace = 0;
            }
        }
    }

    if(openTag && input[i] == ' '){
        if(firstSpace){
            html = input.substring(startToken,i);
            firstSpace = false;
        }
        lastSpace = i;
    }

    if(openTag && input[i] == '='){
        attr = input.substring(lastSpace+1,i);
    }

}

function buildRecursive(root,arr){
    if(root.children.length == 0){
        return arr.join('') + '))';
    }
    const jquery = root.jQuery;
    arr.push(jquery);
    arr.push('.append(')
    for(var i = 0; i < root.children.length;i++){
        buildRecursive(root.children[i],arr);
    }
    arr.push(')');
    return arr.join('') + ')';
}

if(domElements.length > 0)
    console.log(buildRecursive(domElements[0],[]));

html输入：

const input = '<div class="row">'+
                    '<div class="col-xs-12 col-sm-3 col-md-3">'+
                        '<a href="#">'+
                            '<img src="http://wanderluxe.theluxenomad.com/wp-content/uploads/2014/10/http-www.urchinbali.comgallery.jpg" class="img-responsive img-box img-thumbnail"/>'+
                        '</a>'+
                    '</div>'+
                    '<div class="col-xs-12 col-sm-9 col-md-9">'+
                        '<div class="list-group">' +
                            '<div class="list-group-item">' +
                                '<div class="row-picture">'+
                                    '<a href="#" title="sintret">'+
                                        '<img class="circle img-thumbnail img-box" src="http://sintret.com/img/andy.jpg" alt="sintret">'+
                                    '</a>'+
                                '</div>'+
                                '<div class="row-content">'+
                                    '<div class="list-group-item-heading">'+
                                        '<a href="#" title="sintret">'+
                                            '<small>sintret</small>'+
                                        '</a>'+
                                    '</div>'+
                                    '<small>'+
                                        '<i class="glyphicon glyphicon-time"></i> 3 days ago via <span class="twitter"> <i class="fa fa-twitter"></i> <a target="_blank" href="https://twitter.com/sintret" alt="sintret" title="sintret">@sintret</a></span>'+
                                        '<br>'+
                                        '<span class="explore"><i class="glyphicon glyphicon-th"></i> <a href="#">Explore 2 places </a></span>'+
                                    '</small>'+
                                '</div>'+
                            '</div>'+
                        '</div>'

字符串化的domElements数组JSON的第一个元素看起来像这样（根元素指向它的子节点，而子节点又指向它们的子节点......等等）：

{"jQuery":"$('<div>',{\"class\":\"row\"})","children":[{"jQuery":"$('<div>',{\"class\":\"col-xs-12 col-sm-3 col-md-3\"})","children":[{"jQuery":"$('<a>',{\"href\":\"#\"})","children":[{"jQuery":"$('<div>',{\"class\":\"col-xs-12 col-sm-9 col-md-9\"})","children":[{"jQuery":"$('<div>',{\"class\":\"list-group\"})","children":[{"jQuery":"$('<div>',{\"class\":\"list-group-item\"})","children":[{"jQuery":"$('<div>',{\"class\":\"row-picture\"})","children":[{"jQuery":"$('<a>',{\"href\":\"#\",\"title\":\"sintret\"})","children":[{"jQuery":"$('<div>',{\"class\":\"row-content\"})","children":[{"jQuery":"$('<div>',{\"class\":\"list-group-item-heading\"})","children":[{"jQuery":"$('<a>',{\"href\":\"#\",\"title\":\"sintret\"})","children":[{"jQuery":"$('<i>',{\"class\":\"glyphicon glyphicon-time\"})","children":[{"jQuery":"$('<span>',{\"class\":\"twitter\"})","children":[{"jQuery":"$('<i>',{\"class\":\"fa fa-twitter\"})","children":[{"jQuery":"$('<span>',{\"class\":\"explore\"})","children":[{"jQuery":"$('<i>',{\"class\":\"glyphicon glyphicon-th\"})","children":[{"jQuery":"$('<a>',{\"href\":\"#\"})","children":[]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}

最后输出结果：

$('<div>',{"class":"row"}).append($('<div>',{"class":"col-xs-12 col-sm-3 col-md-3"}).append($('<a>',{"href":"#"}).append($('<div>',{"class":"col-xs-12 col-sm-9 col-md-9"}).append($('<div>',{"class":"list-group"}).append($('<div>',{"class":"list-group-item"}).append($('<div>',{"class":"row-picture"}).append($('<a>',{"href":"#","title":"sintret"}).append($('<div>',{"class":"row-content"}).append($('<div>',{"class":"list-group-item-heading"}).append($('<a>',{"href":"#","title":"sintret"}).append($('<i>',{"class":"glyphicon glyphicon-time"}).append($('<span>',{"class":"twitter"}).append($('<i>',{"class":"fa fa-twitter"}).append($('<span>',{"class":"explore"}).append($('<i>',{"class":"glyphicon glyphicon-th"}).append()))))))))))))))))

问题是jQuery的最终结构是错误的，因为它没有正确关闭括号。我想知道是否有人可以提供建议，以便我可以完成它，谢谢！