Javascript 自定义html生成器中的逻辑流缺陷

我开始为自己创建一个简单的html生成器，其工作原理如下：

我的语法如下：

id1，id2=0）{ //上课 var splitSubClass=htmlItems[x].split（'*'）； makeString='\n\t\n'； 对于（y=1；y=0）{ //身份证 var splitSubID=htmlItems[x].split（“！”）； makeString='\n\t\n'；

---

对于（z=1；z您遇到的问题来自这样一个事实：一旦您确定它们是具有类或id的子项，您就永远不会考虑在同一个div中可能存在混合类和id。您最好先找到外部id，然后一次使用子项字符串来制作每个子项。尝试以下方法：

window.buildIT = function(htmlItems){
    count = htmlItems.length;

    // First character remove special characters (Allow Letters, Number)
    for (i=0; i<count; i++){
        htmlItems[i] = htmlItems[i].replace(/^[^a-z]/i, "");
    }

    // build HTML
    for (x=0; x<count; x++){
        var item = htmlItems[x];
        var firstSubClassPos = item.indexOf("*");
        var firstSubIdPos = item.indexOf("!");

        if (firstSubClassPos < 0) {
            firstSubClassPos = item.length;
        }
        if (firstSubIdPos < 0) {
            firstSubIdPos = item.length;
        }

        var subItemStart = firstSubClassPos < firstSubIdPos ? firstSubClassPos : firstSubIdPos;

        var outerId = item.substring(0, subItemStart);
        //make the outer divs
        var makeString = '<div id="' + outerId.toLowerCase() + '">\n\t';

        var subItems = item.substring(subItemStart, item.length);
        if (subItems.length > 0) {
            makeString += '<div id="' + outerId.toLowerCase() + 'Inner" class="clearfix">\n';
        } else {
            makeString += '<div id="' + outerId.toLowerCase() + 'Inner">\n';
        }

        while(subItems.length > 0) {
            var isClass = subItems[0] == '*';
            subItems = subItems.substring(1, subItems.length);
            var nextClassPos = subItems.indexOf('*');
            var nextIdPos = subItems.indexOf('!');
            if (nextClassPos < 0) {
                nextClassPos = subItems.length;
            }
            if (nextIdPos < 0) {
                nextIdPos = subItems.length;
            }
            var nextDelimiterPos = nextClassPos < nextIdPos ? nextClassPos : nextIdPos;
            var marker = subItems.substring(0, nextDelimiterPos);
            var markerType = isClass ? 'class' : 'id';
            makeString += '\t\t<div ' + markerType + '="' + marker + '"></div>\n';
            subItems = subItems.substring(nextDelimiterPos, subItems.length);
        }
        //close our outer divs
        makeString += '\t</div>\n</div>\n\n';
        $("code").append(document.createTextNode(makeString));
    }
}

window.buildIT=函数（htmlItems）{
count=htmlItems.length；
//第一个字符删除特殊字符（允许字母、数字）
对于（i=0；i=0）{
makeString+='\n'；
}否则{
makeString+='\n'；
}
while（subItems.length>0）{
var isClass=子项[0]='*'；
subItems=subItems.substring（1，subItems.length）；
var nextClassPos=subItems.indexOf（'*'）；
var nextippos=子项.indexOf（“！”）；
如果（nextClassPos<0）{
nextClassPos=子项.length；
}
如果（nextippos<0）{
nextippos=子项.length；
}
var nextDelimiterPos=nextClassPos

---

只是一个建议，但是

（*表示类，！表示id）

？使用

（.表示类，#表示id）

这样的标准对jQuery和CSS人员来说就更容易阅读了：）哈哈，非常公平的评论-我对此持开放态度！这是你页面的一部分，让其他人可以更轻松地使用：非常感谢你提供了真正的蓝色。注意：你的正则表达式中的

*

需要转义吗

\*

？这很好用！我看到它缺少的唯一一点是，如果它们是子类，就会添加clearfix类！谢谢你！@remixdesign我错过了这个。我已经更新了答案并处理了这个问题。如果答案回答了你的问题，别忘了接受答案。太棒了，太棒了。谢谢你！

<div id="id1">
    <div id="id1Inner" class="clearfix">
        <div class="class1"></div>
        <div class="class2"></div>
    </div>
</div>

<div id="id2">
    <div id="id2Inner" class="clearfix">
        <div id="id1"></div>
        <div id="id2"></div>
    </div>
</div>

<div id="id1">
    <div id="id1Inner" class="clearfix">
        <div class="class1"></div>
        <div id="id1"></div>
    </div>
</div>

$(document).ready(function(){

        window.buildIT = function(htmlItems){
            count = htmlItems.length;

            // First character remove special characters (Allow Letters, Number)
            for (i=0; i<count; i++){
                htmlItems[i] = htmlItems[i].replace(/^[^a-z]/i, "");
            }

            // build HTML
            for (x=0; x<count; x++){

                var currentItemClass = htmlItems[x].indexOf("*");
                var currentItemID = htmlItems[x].indexOf("!");

                // Check for Sub Class or Sub ID
                if ((currentItemClass >= 0) || (currentItemID >= 0)){

                    // Check for Sub Class
                    if (currentItemClass >= 0){

                        // For Classes
                        var splitSubClass = htmlItems[x].split('*');

                        makeString = '<div id="' + splitSubClass[0].toLowerCase() + '">\n\t<div id="' + splitSubClass[0].toLowerCase() + 'Inner" class="clearfix">\n';
                        for (y=1; y<splitSubClass.length; y++){
                            makeString += '\t\t<div class="' + splitSubClass[y].toLowerCase() + '"></div>\n';
                        }
                        makeString += '\t</div>\n\</div>\n\n';

                        $("code").append(document.createTextNode(makeString));              

                    }

                    // Check for Sub ID
                    if (currentItemID >= 0){

                        // For IDs
                        var splitSubID = htmlItems[x].split('!');

                        makeString = '<div id="' + splitSubID[0].toLowerCase() + '">\n\t<div id="' + splitSubID[0].toLowerCase() + 'Inner" class="clearfix">\n';
                        for (z=1; z<splitSubID.length; z++){
                            makeString += '\t\t<div id="' + splitSubID[z].toLowerCase() + '"></div>\n';
                        }
                        makeString += '\t</div>\n\</div>\n\n';

                        $("code").append(document.createTextNode(makeString));

                    }

                } else {
                    alert(htmlItems[x] + " does not have an * in it");
                    // No Sub Child
                    makeString = '<div id="' + htmlItems[x].toLowerCase() + '">\n\t<div id="' + htmlItems[x].toLowerCase() + 'Inner">\n\t</div>\n </div>\n\n';
                    $("code").append(document.createTextNode(makeString));
                }
            }

        }

        $("#btnCreate").click(function(){
            $("code").html("");
            var htmlItems = $("#text").val();

            if (htmlItems){
                htmlItems = htmlItems.replace(/ /g, "");                //remove all spaces
                htmlItems = htmlItems.replace(/[^a-z0-9,\-_*!]/gi, ""); //remove special characters (Allow Letters, Numbers, and _ -)
                htmlItems = htmlItems.split(',');                       //create array out of items using comma as separator
                if(htmlItems != ""){
                    buildIT(htmlItems);
                } else {
                    alert("Nothing to create.");
                }
                $("#text").val(htmlItems);                  
            } else {
                alert("Nothing to create.");
            }

            return false;
        });
    });

window.buildIT = function(htmlItems){
    count = htmlItems.length;

    // First character remove special characters (Allow Letters, Number)
    for (i=0; i<count; i++){
        htmlItems[i] = htmlItems[i].replace(/^[^a-z]/i, "");
    }

    // build HTML
    for (x=0; x<count; x++){
        var item = htmlItems[x];
        var firstSubClassPos = item.indexOf("*");
        var firstSubIdPos = item.indexOf("!");

        if (firstSubClassPos < 0) {
            firstSubClassPos = item.length;
        }
        if (firstSubIdPos < 0) {
            firstSubIdPos = item.length;
        }

        var subItemStart = firstSubClassPos < firstSubIdPos ? firstSubClassPos : firstSubIdPos;

        var outerId = item.substring(0, subItemStart);
        //make the outer divs
        var makeString = '<div id="' + outerId.toLowerCase() + '">\n\t';

        var subItems = item.substring(subItemStart, item.length);
        if (subItems.length > 0) {
            makeString += '<div id="' + outerId.toLowerCase() + 'Inner" class="clearfix">\n';
        } else {
            makeString += '<div id="' + outerId.toLowerCase() + 'Inner">\n';
        }

        while(subItems.length > 0) {
            var isClass = subItems[0] == '*';
            subItems = subItems.substring(1, subItems.length);
            var nextClassPos = subItems.indexOf('*');
            var nextIdPos = subItems.indexOf('!');
            if (nextClassPos < 0) {
                nextClassPos = subItems.length;
            }
            if (nextIdPos < 0) {
                nextIdPos = subItems.length;
            }
            var nextDelimiterPos = nextClassPos < nextIdPos ? nextClassPos : nextIdPos;
            var marker = subItems.substring(0, nextDelimiterPos);
            var markerType = isClass ? 'class' : 'id';
            makeString += '\t\t<div ' + markerType + '="' + marker + '"></div>\n';
            subItems = subItems.substring(nextDelimiterPos, subItems.length);
        }
        //close our outer divs
        makeString += '\t</div>\n</div>\n\n';
        $("code").append(document.createTextNode(makeString));
    }
}