[英]Logic Flow Flaw in custom html builder
I set out to create a simple html builder for myself basically it works like this: 我打算为自己创建一个简单的html构建器,基本上它的工作原理如下:
My syntax is as follows: 我的语法如下:
id1,id2 <- comma separated would produce 2 div groups id1,id2 < - 逗号分隔将产生2个div组
<div id="id1">
<div id="id1Inner"></div>
</div>
<div id="id2">
<div id="id2Inner"></div>
</div>
You can also do inner classes with clearfix added to its inner parent as such: (* denotes class, ! denotes id) 您还可以将内部类添加到其内部父级的内部类中执行:(*表示类,!表示id)
id1*class1*class2,id2!id1!id2 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>
The problem happens when I try to mix adding inner classes (*) and ids (!) such as this: 当我尝试混合添加内部类(*)和ids(!)时会出现问题,例如:
id1*class1!id1 ID1 * class1的!ID1
This SHOULD create the following block - however I am at a loss now for how to get there. 这应该创建以下块 - 但是我现在不知道如何到达那里。
<div id="id1">
<div id="id1Inner" class="clearfix">
<div class="class1"></div>
<div id="id1"></div>
</div>
</div>
Live preview my script: http://labs.remixdesigninc.com/builder/index.html 实时预览我的脚本: http : //labs.remixdesigninc.com/builder/index.html
Code Reference: 代码参考:
$(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;
});
});
The problem you are having comes from the fact that once you identify that their is a subitem with a class or id, you never take into account that there could be mixed classes and ids in the same div. 你遇到的问题来自这样一个事实:一旦你确定他们是一个带有类或id的子项,你就不会考虑在同一个div中可能有混合类和id。 You are probably better off finding the outer id then consuming the subitem string a piece at a time to make each child item.
你可能最好找到外部id然后一次消耗子项字符串来制作每个子项目。 Try this:
尝试这个:
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));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.