效果
预览
预览地址:http://120.79.163.94//JYeontuComponents/#/codeHeightLightView
关键代码实现
主要是通过正则表达式来进行匹配替换。
找出嵌套标签
findTag(text) { let l = [], r = []; let res = []; for (let i = 0; i < text.length; i++) { if (text[i] == "<") { if (text[i + 1] == "!") continue; if (text[i + 1] == "/") { let j = i + 2; while (text[j] != ">") { j++; } res.push(text.slice(l.pop(), j + 1)); } else { l.push(i); } } } return res; }
标签名高亮
replaceDfs(tagReg, textCode) { let res = textCode.replace( tagReg, (s1, s2, s3, s4, s5, s6, s7, s8, s9, s10) => { let res = ""; if (s4 == undefined) return "<span>" + s1 + "</span>"; res += "<span><<span>" + this.getColor("tagWord", s4) + " "; let text = s6.match(/>(.*)</); if (text && text.length > 1) { text = text[1]; } else { text = ""; } s6 = s6 .split(/>.*<\//)[0] .replace(/ *= */g, "=") .split(" "); for (let i = 0; i < s6.length; i++) { if (s6[i] !== "") { let t = s6[i].split("="); if (t.length == 2) { res += this.getColor("attrWord", t[0]); res += " = "; res += this.getColor("attrValue", t[1]); if (i < s6.length - 1) res += " "; } else { t = s6[i].split(":"); if (t.length == 2) { res += this.getColor("attrWord", t[0]); res += ":"; res += this.getColor("attrValue", t[1]); if (i < s6.length - 1) res += " "; } } } } res += "<span>>" + text + "<</span>/" + this.getColor("tagWord", s4) + "<span>></span>"; return res; } ); return res; }
关键字高亮
//字符串 let regStr = "('|\")(.*)('|\")"; showCode = showCode.replace( new RegExp(regStr, "g"), "<span style='color : " + colors.strWord + "'>$1$2$3</span>" ); //js关键字 let keyWord = [...this.jsKeyWord]; keyWord = keyWord.concat([...this.jsKeyObj]); for (let i = 0; i < keyWord.length; i++) { let regKeyWord = "((([\\t|\\r|\\n| ])*(" + keyWord[i] + "))( |,|\\.|\\(|;))"; showCode = showCode.replace( new RegExp(regKeyWord, "g"), "<span style='color : " + colors.keyWord + "'>$2</span>$5" ); } //自定义关键字 let keyWords = [...this.keyWords]; for (let i = 0; i < keyWords.length; i++) { let regKeyWord = "(" + keyWords[i].value + ")"; showCode = showCode.replace( new RegExp(regKeyWord, "g"), "<span style='color : " + keyWords[i].color + " !important;'>$1</span>" ); } //js方法 let functions = /([a-zA-Z0-9_]+)\([A-Za-z,0-9]*\)/g; let functionKeyWord = showCode.match(functions) || []; functionKeyWord = functionKeyWord .map(item => { return item.slice(0, item.indexOf("(")); }) .sort((a, b) => { return b.length - a.length; }); for (let i = 0; i < functionKeyWord.length; i++) { let regFunctionKeyWord = "(" + functionKeyWord[i] + ")"; showCode = showCode.replace( new RegExp(regFunctionKeyWord, "g"), "<span style='color : " + colors.functionkeyWord + "'>$1</span>" ); } //内置方法 let methodKeyWord = [...methodKeyWord]; for (let i = 0; i < methodKeyWord.length; i++) { let regMethodKeyWord = "(" + methodKeyWord[i] + ")"; showCode = showCode.replace( new RegExp(regMethodKeyWord, "g"), "<span style='color : " + colors.methodkeyWord + "'>$1</span>" ); } //变量名 let varReg = /([a-zA-Z]+):/g; showCode = showCode.replace( varReg, "<span style='color : " + colors.varWord + "'>$1</span>:" ); //注释 showCode = showCode.replace( /(\/\/.*)|(\/\*.*([\r\n].*)*\*\/)/g, "<span style='color :" + colors.note + "'>$1$2</span>" );
npm引入
组件以上传到npm,可以直接install使用,0.1.4以上版本加入了该组件。
1.安装
npm i @jyeontu/jvuewheel -S
2.引入
//引入组件库 import jvuewheel from '@jyeontu/jvuewheel' //引入样式 import '@jyeontu/jvuewheel/lib/jvuewhell.css' Vue.use(jvuewheel);
3.vue中引用组件
<j-code-height-light :code = "code" :keyWords = "keyWords" :color = "color"> </j-code-height-light>
资源地址
组件使用文档
文档地址:http://120.79.163.94/JYeontuComponents/#/homePage
源码地址
目前该组件还存在一些未知bug,有兴趣的可以一起来改造。
Gitee地址:https://gitee.com/zheng_yongtao/jyeontu-component-warehouse/tree/master/JYeontuComponentWarehouse