打造个性化代码高亮组件

效果

预览

预览地址：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地址：gitee.com/zheng_yongt…