Question

我打算为自己创建一个简单的html构建器，基本上它的工作原理如下：

我的语法如下：

id1，id2＆lt; - 逗号分隔将产生2个div组

<div id="id1">
    <div id="id1Inner"></div>
</div>

<div id="id2">
    <div id="id2Inner"></div>
</div>

你也可以在内部父类中添加clearfix来做内部类：（*表示类，！表示id）

ID1 * *的Class1 Class2中，ID2！ID1！ID2

<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>

当我尝试混合添加内部类（*）和ids（！）时会出现问题：

ID1 *的Class1！ID1

应该创建以下块 - 但是我现在不知道如何到达那里。

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

实时预览我的脚本： http://labs.remixdesigninc.com/builder/index.html

代码参考：

$(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;
        });
    });

Answer 1

你遇到的问题来自这样一个事实：一旦你确定他们是一个带有类或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));
    }
}

Fiddle

自定义html构建器中的逻辑流程缺陷

1 个答案: