通过js 将表达式转移成html代码
来源：互联网 发布：南通纯电动汽车知豆 编辑：程序博客网 时间：2024/05/18 10:10
写了个用于html自动生成的js还存在以下问题:1:*N之前的内容必须是(content)*N,应该可以支持div*3元素直接加*N的写法2:最后的拼接都是用replace的,假如存在特殊字符%c,会出错.且有点慢.3:应该在处理之前将字符串和非字符串区分开来,字符串中有 > *()等符号也会导致解析错误.主要代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head></div><body> <script src="require.js"></script> <script> require(['util', 'jquery'], function (util, $) { var testExpressions = ["select.class1[name='select1']>(option)*3+label>(h2>hi)*3"] var reg1 = /^\*\s*(\d+)(.*)/; var reg2 = /[>+]|[(+]/; var demoHtml = "<%s %s %s>%c</%s>"; var reg3 = /^(input|div|span|option|label|img|h1|h2|h3|h4|h5|h6|a|table|select|tbody|td|tr|th|li|ul|ol)\s*(\.[A-Za-z0-9]+)?\s*(\[[^\]]*)?\s*.*/; var analysisExpress = function (expression) { var analysis_deep = function (basicId, string, pId, prevId) { if (!(string = $.trim(string))) return; var id = util.UUID(); var index1 = string.indexOf(">"); var index2 = string.indexOf("("); var nearestIndex = util.getMin([index1, index2], -1); if (nearestIndex === -1) { initArr.push({ basicId: basicId, id: id, pId: pId, prevId: prevId, content: string }); } else if (nearestIndex === 0) { var pieces = util.cutString(string, index1); initArr.push({ basicId: basicId, id: id, pId: pId, prevId: prevId, content: pieces[0] }) analysis_deep(basicId, pieces[1], id, 'first'); } else { var pieces = util.cutString(string, index2); if (pieces[0]) { initArr.push({ basicId: basicId, id: id, pId: pId, prevId: prevId, content: pieces[0] }) analysis_bracket(basicId, pieces[1], pId, id); } else { analysis_bracket(basicId, pieces[1], pId, prevId); } } }; var analysis_bracket = function (basicId, string, pId, prevId) { if (!(string = $.trim(string))) return; var deep = 1; var remainString = string; var sumIndex = 0; var id = util.UUID(); var repeatTime = -1; while (true) { var index1 = remainString.indexOf(")"); var index2 = remainString.indexOf("("); var nearestIndex = util.getMin([index1, index2], -1); if (nearestIndex === 0) { deep--; sumIndex += index1; repeatTime++; var pieces = util.cutString(remainString, index1); remainString = pieces[1]; } else if (nearestIndex === 1) { deep++; sumIndex += index2; repeatTime++; var pieces = util.cutString(remainString, index2); remainString = pieces[1]; } //breakCondition 1没有需要解析的字符串 2括号闭合 或者3 既找到不到 (也找不到 )退出 if (!remainString || deep === 0 || nearestIndex === -1) { break; } } //如果 deep!=0 退出 均为 异常 if (deep != 0) { throw new Error("analysis_bracket Error: 找不到闭合 )"); } var pieces = util.cutString(string, sumIndex + repeatTime); var remainString = $.trim(pieces[1]); if ("*" == remainString[0]) { if (!reg1.test(remainString)) { throw new Error("analysis_bracket Error : *号后面需要连接着 int "); } var result = remainString.match(reg1); var number = result[1]; var tailString = result[2]; if (reg2.test(pieces[0])) { var innerMarkId = util.UUID(); initArr.push({ basicId: basicId, isReplace: true, id: id, pId: pId, prevId: prevId, content: pieces[0], innerId: innerMarkId, repeat: number }); analysis_deep(innerMarkId, pieces[0], 'root', 'first'); } else { initArr.push({ basicId: basicId, id: id, pId: pId, prevId: prevId, content: pieces[0], repeat: number }); } analysis_deep(basicId, tailString, pId, id); } else { if (reg2.test(pieces[0])) { var innerMarkId = util.UUID(); initArr.push({ basicId: basicId, isReplace: true, id: id, pId: pId, prevId: prevId, innerId: innerMarkId, content: pieces[0] }); analysis_deep(innerMarkId, pieces[0], 'root', 'first'); } else { initArr.push({ basicId: basicId, id: id, pId: pId, prevId: prevId, content: pieces[0] }); } analysis_deep(basicId, remainString, pId, id); } } var initArr = []; analysis_deep('basic', expression, 'root', 'first'); return initArr; } var createLinkObjectTree = function (initArr) { var createLinkObjectArr = []; var ObjectAll = {}; for (var i = 0, length = initArr.length; i < length; i++) { ObjectAll[initArr[i].id] = initArr[i]; } var treeObject = {}; for (var key in ObjectAll) { if (ObjectAll[key].pId === "root") { treeObject[ObjectAll[key].basicId] = (ObjectAll[key]); } else { var currentItem = ObjectAll[key]; var parentItem = ObjectAll[currentItem.pId]; if (!parentItem.child) { parentItem.child = []; } parentItem.child.push(currentItem); } } return treeObject; } var createHtmlByTree = function (treeObject) { var resultHtml = ""; var datatreeObject = treeObject; var root = treeObject["basic"]; var createOneLevel = function (currentNode) { if (!currentNode) return; var isReplace = currentNode.isReplace; if (isReplace) { var content = createOneLevel(treeObject[currentNode.innerId]); return util.createRepeatString(content, currentNode.repeat); } else { var content = currentNode.content; if (!content) return; var expressions = $.trim(content).split("+"); var canAddChild = false; var currentHtmlContent = ""; if (expressions && expressions.length > 0) { for (var i = 0, length = expressions.length; i < length; i++) { var content_ = expressions[i]; if (!$.trim(content_)) continue; var resultObject = singleExpressionAnalysisAndCreate(content_); canAddChild = resultObject.canAddChild; currentHtmlContent += resultObject.data; } } var childs = currentNode.child; var childContent = ""; if (childs && childs.length > 0) { for (var i = 0, length = childs.length; i < length; i++) { childContent += createOneLevel(childs[i]); } currentHtmlContent = util.replace_mark(currentHtmlContent, "%c", [childContent]); } else { currentHtmlContent = util.replace_mark(currentHtmlContent, "%c", [""]); } return util.createRepeatString(currentHtmlContent, currentNode.repeat); } }; var singleExpressionAnalysisAndCreate = function (expression) { if (reg3.test(expression)) { var data_Arr = [].slice.call(expression.match(reg3), 1, 4); return { canAddChild: true, data: createDetail(data_Arr) } } else { return { canAddChild: false, data: expression }; } } var createDetail = function (data_arr) { if (!data_arr || !data_arr[0]) return ""; var returnString = ""; var classStr = ""; if (data_arr[1]) { classStr = " class='" + data_arr[1].substring(1) + "' "; } var insertArray = [data_arr[0], classStr, data_arr[2] ? (data_arr[2] + "").substring(1) : "", data_arr[0]]; return util.replace_(demoHtml, insertArray); } return (createOneLevel(root)); } var begin = ~function () { for (var i = 0, length = testExpressions.length; i < length; i++) { //按照 括号 和 >解析 var initArr = analysisExpress(testExpressions[i]) console.table(initArr); //形成属性结构 var treeObject = createLinkObjectTree(initArr); console.log(treeObject); //每个节点 按 + 分割 并解析拼装 var resultHtml = createHtmlByTree(treeObject); console.log(resultHtml) } } (); }) </script></body></html>工具类
; define(function (require) { var util = { replace: function (text) { var keys = [].slice.call(arguments, 1), i = 0 return text.replace(/%s/g, function () { return (i < keys.length) ? keys[i++] : "" }) }, replace_: function (text, array) { var keys = array, i = 0 return text.replace(/%s/g, function () { return (i < keys.length) ? keys[i++] : "" }) }, replace_mark: function (text, mark, array) { var keys = array, i = 0; var reg = new RegExp(mark, "g"); return text.replace(reg, function () { return (i < keys.length) ? keys[i++] : "" }) }, encode: function (str) { return encodeURIComponent(str) } , html_transform: function (str) { var s = ""; if (str.length == 0) return ""; s = str.replace(/&/g, ">"); s = s.replace(/</g, "<"); s = s.replace(/>/g, ">"); s = s.replace(/ /g, " "); s = s.replace(/\'/g, "'"); s = s.replace(/\"/g, """); s = s.replace(/\n/g, "<br>"); return s; }, excludeSpecial: function (s) { s = s.replace(/[\'\"\\\/\b\f\n\r\t]/g, '') s = s.replace(/[\@\#\$\%\^\&\*\{\}\:\"\L\<\>\?]/g, '') return s; }, getMin: function (indexArray, filterKey) { if (!indexArray || indexArray.length == 0) { return -1; } var minValue, minIndex = -1, isInit = false; for (var i = 0; i < indexArray.length; i++) { if (indexArray[i] === filterKey) { continue; } if (!isInit) { minValue = indexArray[i]; minIndex = i; isInit = true; continue; } if (indexArray[i] < minValue) { minValue = indexArray[i]; minIndex = i; } } return minIndex; }, getMax: function (indexArray, filterKey) { if (!indexArray || indexArray.length == 0) { return -1; } var maxValue, maxIndex = -1, isInit = false; for (var i = 0; i < indexArray.length; i++) { if (indexArray[i] === filterKey) { continue; } if (!isInit) { maxValue = indexArray[i]; maxIndex = i; isInit = true; continue; } if (indexArray[i] > maxValue) { maxValue = indexArray[i]; maxIndex = i; } } return maxValue; }, UUID: function () { var s = []; var hexDigits = "0123456789abcdef"; for (var i = 0; i < 36; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); } s[14] = "4"; s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); s[8] = s[13] = s[18] = s[23] = "-"; var uuid = s.join(""); return uuid; }, cutString: function (string, index) { return [string.substring(0, index), string.substring(index + 1, string.length)]; }, hashCode: function (str) { var hash = 0; if (str.length == 0) return hash; for (i = 0; i < str.length; i++) { char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; } return hash; }, inArray: function (value, array) { if (!value) return -1; if (!array || array.length == 0) return -1; for (var i = 0; i < array.length; i++) { if (array[i] == value) { return true; } } return false; }, inArray_: function (value, array) { if (!value) return -1; if (!array || array.length == 0) return -1; for (var i = 0; i < array.length; i++) { if (!array[i]) continue; if (array[i].toUpperCase() == value.toUpperCase()) { return true; } } return false; }, toJson: function (object) { require('json2'); if (!object) return "{}"; return JSON.stringify(object) }, selectCreate: function (dataList, selectItem) { if (!dataList || dataList.length === 0) return ""; var option = "<option value='%s' %s>%s</option>"; var resultHtml = "<option value=\"-1\">请选择</option>"; if (selectItem) { for (var i = 0; i < dataList.length; i++) { resultHtml += this.replace( option, dataList[i][0], dataList[i][0] == selectItem ? "selected" : "", dataList[i][1]) } } else { for (var i = 0; i < dataList.length; i++) { resultHtml += this.replace( option, dataList[i][0], "", dataList[i][1]) } } return "<select>" + resultHtml + "</select>" }, getDate: function () { var date = new Date(); var seperator1 = "-"; var month = date.getMonth() + 1; var strDate = date.getDate(); return date.getFullYear() + "-" + month + "-" + strDate; },createRepeatString:function (content,repeatTimes){ if(!repeatTimes)return content; if(repeatTimes<=1)return content; var tempResult = ""; for (var i = 0; i < repeatTimes; i++) { tempResult += content; } return tempResult; } } return util})对问题 2和3做出了调整,新的代码如下:
字符串内的内容如何处理正在考虑中
; define(function (require) { var util = require('util') var $ = require("jquery"); var reg1 = /^\*\s*(\d+)(.*)/; var reg2 = /[>+]|[(+]/; var demoHtml = "<%s %s %s>"; var reg3 = /^(input|div|span|option|label|img|h1|h2|h3|h4|h5|h6|a|table|select|tbody|td|tr|th|li|ul|ol)\s*(\.[A-Za-z0-9]+)?\s*(\[[^\]]*)?\s*.*/; //为了方便解析 *之前总是 ) 但是 存在 td*3 这种情况 //加入 *之前除了空格最近的一个符号不是 ) 那么 加入符合标签名称 我需要给他加上个 () var bracketAdd = function (expresion) { //*前后的空格去掉 expresion = expresion.replace(/(\s*)(\*)(\s*)(\d)/g, "$2$4"); //加上括号 expresion = expresion.replace(/(input|div|span|option|label|img|h1|h2|h3|h4|h5|h6|a|table|select|tbody|td|tr|th|li|ul|ol)\*/g, "($1)*"); return expresion; } var analysisExpress = function (expression) { var analysis_deep = function (basicId, string, pId, prevId) { if (!(string = $.trim(string))) return; var id = util.UUID(); var index1 = string.indexOf(">"); var index2 = string.indexOf("("); var nearestIndex = util.getMin([index1, index2], -1); if (nearestIndex === -1) { initArr.push({ basicId: basicId, id: id, pId: pId, prevId: prevId, content: string }); } else if (nearestIndex === 0) { var pieces = util.cutString(string, index1); initArr.push({ basicId: basicId, id: id, pId: pId, prevId: prevId, content: pieces[0] }) analysis_deep(basicId, pieces[1], id, 'first'); } else { var pieces = util.cutString(string, index2); if (pieces[0]) { initArr.push({ basicId: basicId, id: id, pId: pId, prevId: prevId, content: pieces[0] }) analysis_bracket(basicId, pieces[1], pId, id); } else { analysis_bracket(basicId, pieces[1], pId, prevId); } } }; var analysis_bracket = function (basicId, string, pId, prevId) { if (!(string = $.trim(string))) return; var deep = 1; var remainString = string; var sumIndex = 0; var id = util.UUID(); var repeatTime = -1; while (true) { var index1 = remainString.indexOf(")"); var index2 = remainString.indexOf("("); var nearestIndex = util.getMin([index1, index2], -1); if (nearestIndex === 0) { deep--; sumIndex += index1; repeatTime++; var pieces = util.cutString(remainString, index1); remainString = pieces[1]; } else if (nearestIndex === 1) { deep++; sumIndex += index2; repeatTime++; var pieces = util.cutString(remainString, index2); remainString = pieces[1]; } //breakCondition 1没有需要解析的字符串 2括号闭合 或者3 既找到不到 (也找不到 )退出 if (!remainString || deep === 0 || nearestIndex === -1) { break; } } //如果 deep!=0 退出 均为 异常 if (deep != 0) { throw new Error("analysis_bracket Error: 找不到闭合 )"); } var pieces = util.cutString(string, sumIndex + repeatTime); var remainString = $.trim(pieces[1]); if ("*" == remainString[0]) { if (!reg1.test(remainString)) { throw new Error("analysis_bracket Error : *号后面需要连接着 int "); } var result = remainString.match(reg1); var number = result[1]; var tailString = result[2]; if (reg2.test(pieces[0])) { var innerMarkId = util.UUID(); initArr.push({ basicId: basicId, isReplace: true, id: id, pId: pId, prevId: prevId, content: pieces[0], innerId: innerMarkId, repeat: number }); analysis_deep(innerMarkId, pieces[0], 'root', 'first'); } else { initArr.push({ basicId: basicId, id: id, pId: pId, prevId: prevId, content: pieces[0], repeat: number }); } analysis_deep(basicId, tailString, pId, id); } else { if (reg2.test(pieces[0])) { var innerMarkId = util.UUID(); initArr.push({ basicId: basicId, isReplace: true, id: id, pId: pId, prevId: prevId, innerId: innerMarkId, content: pieces[0] }); analysis_deep(innerMarkId, pieces[0], 'root', 'first'); } else { initArr.push({ basicId: basicId, id: id, pId: pId, prevId: prevId, content: pieces[0] }); } analysis_deep(basicId, remainString, pId, id); } } var initArr = []; analysis_deep('basic', expression, 'root', 'first'); return initArr; } var createLinkObjectTree = function (initArr) { var createLinkObjectArr = []; var ObjectAll = {}; for (var i = 0, length = initArr.length; i < length; i++) { ObjectAll[initArr[i].id] = initArr[i]; } var treeObject = {}; for (var key in ObjectAll) { if (ObjectAll[key].pId === "root") { treeObject[ObjectAll[key].basicId] = (ObjectAll[key]); } else { var currentItem = ObjectAll[key]; var parentItem = ObjectAll[currentItem.pId]; if (!parentItem.child) { parentItem.child = []; } parentItem.child.push(currentItem); } } return treeObject; } var createHtmlByTree = function (treeObject) { var resultHtml = ""; var datatreeObject = treeObject; var root = treeObject["basic"]; var createOneLevel = function (currentNode) { if (!currentNode) return; var isReplace = currentNode.isReplace; if (isReplace) { var content = createOneLevel(treeObject[currentNode.innerId]); return util.createRepeatString(content, currentNode.repeat); } else { var content = currentNode.content; if (!content) return; var expressions = $.trim(content).split("+"); var canAddChild = false; var currentHtmlContent = ""; var currentHtmlContentArr = []; if (expressions && expressions.length > 0) { for (var i = 0, length = expressions.length; i < length; i++) { var content_ = expressions[i]; if (!$.trim(content_)) continue; var resultObject = singleExpressionAnalysisAndCreate(content_); canAddChild = resultObject.canAddChild; currentHtmlContentArr.push(resultObject.data); } } var childs = currentNode.child; var childContent = ""; if (currentHtmlContentArr.length == 0) return ""; if (childs && childs.length > 0 && canAddChild) { for (var i = 0, length = childs.length; i < length; i++) { childContent += createOneLevel(childs[i]); } //给最后一个节点添加 child 内容 for (var i = 0, length = currentHtmlContentArr.length; i < length; i++) { if (i < length - 1) { currentHtmlContent += currentHtmlContentArr[i][0] + currentHtmlContentArr[i][1]; } else { currentHtmlContent += currentHtmlContentArr[i][0] + childContent + currentHtmlContentArr[i][1] } } } else { for (var i = 0, length = currentHtmlContentArr.length; i < length; i++) { currentHtmlContent += currentHtmlContentArr[i][0] + currentHtmlContentArr[i][1]; } } return util.createRepeatString(currentHtmlContent, currentNode.repeat); } }; var singleExpressionAnalysisAndCreate = function (expression) { if (reg3.test(expression)) { var data_Arr = [].slice.call(expression.match(reg3), 1, 4); return { canAddChild: true, data: createDetail(data_Arr) } } else { return { canAddChild: false, data: expression }; } } var createDetail = function (data_arr) { if (!data_arr || !data_arr[0]) return ""; var returnString = ""; var classStr = ""; if (data_arr[1]) { classStr = " class='" + data_arr[1].substring(1) + "' "; } var insertArray = [data_arr[0], classStr, data_arr[2] ? (data_arr[2] + "").substring(1) : ""]; return [util.replace_(demoHtml, insertArray), "</" + data_arr[0] + ">"]; } return createOneLevel(root); } var begin = function (testExpressions) { var initOkExpression = bracketAdd(testExpressions[i]); //按照 括号 和 >解析 console.log(initOkExpression) var initArr = analysisExpress(initOkExpression) console.table(initArr); //形成属性结构 var treeObject = createLinkObjectTree(initArr); console.log(treeObject); //每个节点 按 + 分割 并解析拼装 var resultHtml = createHtmlByTree(treeObject); console.log(resultHtml) return resultHtm; }; return begin;}) 0 0
- 通过js 将表达式转移成html代码
- 将html代码转换成js字符串的小工具
- Html与JS正则表达式测试代码
- 将HTML自动转为JS代码
- 将HTML自动转为JS代码
- 将HTML自动转为JS代码
- 通过xslt将xml转换为html代码
- 如何将HTML代码通过PHP写入MYSQL?
- 将jsp数组转移到js内
- Sublime Text3通过HTML-CSS-JS Prettify自动格式化代码
- 如何用js代码将某个html标签重写
- JS将html转换成txt
- 将BBCode代码解析成HTML
- 手机号正则表达式详解和演示html页面代码 js、html
- Native.js学习(三): html通过native.js调用原生android API代码段总结
- 通过Python-markdown 将markdown转换成html
- 通过iText将html转换成pdf中文乱码问题
- 通过js、jquery、ajax将php的输出传给html元素
- 读书笔记(一)---单例模式
- 剑指offer_重建二叉数
- Kattis-Curious Cupid(莫队)
- PAT A1021. Deepest Root (25)
- Spring4-2 Bean配置
- 通过js 将表达式转移成html代码
- JavaScript HTML DOM 对
- 几种负载均衡实现方式
- 自定义统计表
- CentOS安装mysql并配置远程访问
- 静态库和动态库
- 弹性布局基础讲解与高效应用
- awt --事件处理
- leecode 解题总结：303. Range Sum Query
