Set CSS of code when it contains reserved words

南楼画角 提交于 2019-12-10 03:57:53

问题


What I am trying to do: As stated in the title, I want to set the CSS of a word if it is a reserved word.


HTML
<html>
    <body>
        <code id="java">
            public static void main(String[] args)<br>
            {
                <pre>    System.out.println("Hello World!");</pre>
            }
        </code>
    </body>
</html>


jQuery
$(document).ready(function()
{
    // Get the text inside the code tags
    var code  = $("#java").text();

    // Split up each word
    var split = code.split(' ');

    // Array of reserved words
    var array = ["abstract","assert","boolean","break","byte","case",
                 "catch","char","class","const","continue","default",
                 "do","double","else","else if","enum","extends","final",
                 "finally","float","for","goto","if","import","implements",
                 "instanceof","int","interface","long","native","new","null",
                 "package","private","protected","public","return","short",
                 "static","strictfp","super","switch","synchronized","this",
                 "throw","throws","transient","void","volatile","while"];

    // Added when text contains a reserved word
    var css = {'font-weight':'bold','color':'#2400D9'}

    array = jQuery.map(array, function(n,i)
    {
        for (int j=0; j<array.length; j++)
        {
            if (split[i].contains(array[j]))
                split[i].css(css);
        }
    });
});


Problem: I have referred to the documentation for several methods (in the references section below), but I'm not too sure where the problem(s) lies. To narrow the issue down, my question(s) would be...
  1. Is .split() even a method in jQuery?
  2. Should I use a for loop to run through all the words in the array (to see if the code contains a reserved word) or is there a better approach (such as .each())?
  3. If I should use .each(), could someone please give me a simple example? I don't understand the examples in the documentation.


References
  • .split() in jQuery
  • .map()
  • .each()

回答1:


If I understood correctly, you can achieve what you want using $.inArray and wrapping the reserved word with a span tag. See my DEMO

Edit: Below is from jQuery $.inArray documentation.

$.inArray( value, array [, fromIndex] ) -

valueThe value to search for.

arrayAn array through which to search.

fromIndexThe index of the array at which to begin the search. The default is 0, which will search the whole array.

..read more..

CSS

.code {
    font-weight: bold;
    color: #2400D9;
}

JS

$(document).ready(function() {
    // Get the text inside the code tags
    var code = $("#java").html();

    // Split up each word
    var split = code.split(' ');

    // Array of reserved words
    var array = ["abstract", "assert", "boolean", "break", "byte", "case", "catch", "char", "class", "const", "continue", "default", "do", "double", "else", "else if", "enum", "extends", "final", "finally", "float", "for", "goto", "if", "import", "implements", "instanceof", "int", "interface", "long", "native", "new", "null", "package", "private", "protected", "public", "return", "short", "static", "strictfp", "super", "switch", "synchronized", "this", "throw", "throws", "transient", "void", "volatile", "while"];

    for (var j = 0; j < split.length; j++) {
        if ($.inArray(split[j], array) > 0) {
            split[j] = '<span class="code">' + split[j] + '</span>';
        }
    }

    $("#java").html(split.join(' '));
});



回答2:


I asked myself this question a few months ago, after a lot of searching I found this:

http://forum.jquery.com/topic/wrapping-specific-words-inside-span-elements#14737000001028912

which I addapted into the following jQuery plugin:

$.fn.applyKeyword = function(opt, selector) {
    var numOfKeys = opt.keys.length;

    if (typeof selector == 'undefined') {
        selector = ":visible:not(:input):not(label):not(select)";
    }

    for (var i = 0; i < numOfKeys; i++) {
        if (opt.keys[i].partials) {
            var re = new RegExp("(" + opt.keys[i].keyword + ")", 'ig');
        } else {
            var re = new RegExp("(\\b" + opt.keys[i].keyword + "\\b)", 'ig');
        }
        $(selector, this).contents().filter(function() {
            return this.nodeType != 1;
        }).each(function() {
            var output = $(this).text().replace(re, opt.keys[i].prefix + "$1" + opt.keys[i].suffix);
            if (output != $(this).text()) {
                $(this).wrap("<p></p>").parent('p').html(output).contents().unwrap();
            }
        })
    }
}

It doesn't have a way to 'undo' the keyword wrapping but it suited my needs.

If you need an example how to implement this I'd be happy to make one if you provide some text I can test it on....



来源:https://stackoverflow.com/questions/9744630/set-css-of-code-when-it-contains-reserved-words

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!