Javascript实现Java代码高亮显示

1.将js脚本导入html中

<script type="text/javascript" src="js/code_color.js"></script>

2.将div中的class属性值设为code

<div class="code"></div>

3.写入java代码即可

  <div class="code">
    public static void main(String[] args) {
        Solution s = new Solution();
        String x = "哈哈";
        System.out.println(s.countAndSay(6));
        System.out.println("x.intern()");
        System.out.println("x.intern()");
        if (x.equals("haha")) {
            x = "测试";
        }
    }
  </div>

4.结果

5.全部js代码如下

window.onload = function() {
        var lang = ["java", "python", "c++"];
        // java关键字
        var java_keyword = ["class", "public", "static", "private", "protected",
                            "return", "break", "continue", "void", "new", "if", 
                            "else", "for", "while", "int", "double", "float",
                            "byte"
                           ];
        var div = document.getElementsByTagName("div");
        // 遍历所有的div
        for (var i = 0; i < div.length; i++) {
            if (div[i].getAttribute("class") == "code") {
                div[i].style.backgroundColor = "#2c2c2c";
                div[i].style.padding = "5px";
                div[i].style.margin = "2px";
                div[i].style.color = "#ffff99";
                div[i].style.fontFamily = "sans-serif,宋体";
                var text = div[i].innerHTML;
                var text_result = "";

                // 关键字颜色
                for (var j = 0; j < java_keyword.length; j++) {
                    var keyword = java_keyword[j] + " ";
                    // alert(text.indexOf(keyword));
                    var result = "<font color='#ff6600'>" + keyword + "</font>";
                    // text = text.replace(/keyword/g, result);
                    text = text.replace(new RegExp(keyword, "g"), result);

                }

                // 字符串颜色(有bug：遇到小括号失效)
                var java_string = text.match(/\".*?\"/g);
                var java_string2 = text.match(/\".*?\)/g);
                if (java_string != null) {
                    for (var j = 0; j < java_string.length; j++) {
                        var string_result = '<font color=#66cc00 >' + java_string[j] + ' </font>';
                        text = text.replace(new RegExp(java_string[j], "g"), string_result);
                    }
                }

                // 类颜色
                var java_class = text.match(/[A-Z].*?\s/g);
                if (java_class != null) {
                    for (var j = 0; j < java_class.length; j++) {
                        var class_result = '<font color=#996633 >' + java_class[j] + ' </font>';
                        text = text.replace(new RegExp(java_class[j], "g"), class_result);

                    }
                }




                // // 对象颜色
                // var java_object = text.match(/(?<=\.).*?(?=\.)/);
                // var java_object2 = text.match(/(?<=\+).*?(?=\.)/);
                // if (java_object != null) {
                //  for (var j = 0; j < java_object.length; j++) {
                //      var object_result = "<font color='#ff3366'>" + java_object[j] + "</font>";
                //      text = text.replace(new RegExp(java_object[j], "g"), object_result);
                //  }
                // }
                // if (java_object2 != null) {
                //  for (var j = 0; j < java_object2.length; j++) {
                //      var object_result = "<font color='#ff3366'>" + java_object2[j] + "</font>";
                //      text = text.replace(new RegExp(java_object2[j], "g"), object_result);
                //  }
                // }

                text = "<pre>" + text + "</pre>";
                div[i].innerHTML = text;        

            }           
        }
    }

6.存在的问题

1. 字符串中如果存在()，则显示失效
2. 只对关键字、字符串上色，其他未上色
3. 有没完全实现，是一个demo。

我的个人博客：https://longweibing.github.io/