Установить CSS кода, когда он содержит зарезервированные слова - PullRequest
Новая
       24

Установить CSS кода, когда он содержит зарезервированные слова

7 голосов
/ 17 марта 2012

Что я пытаюсь сделать : Как указано в заголовке, я хочу установить CSS слова, если это зарезервированное слово.

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

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);
        }
    });
});

Проблема : Я сослался на документацию для нескольких методов (в разделе ссылок ниже), но я не слишком уверен, где проблема (ы). Чтобы сузить проблему, мой вопрос (ы) будет ...
  1. Является ли .split() даже методом в jQuery?
  2. Должен ли я использовать цикл for для выполнения всех слов в массиве (чтобы увидеть, содержит ли код зарезервированное слово) или есть лучший подход (например, .each())?
  3. Если я должен использовать .each(), кто-нибудь может привести простой пример? Я не понимаю примеры в документации.

Ссылки

Ответы [ 2 ]

4 голосов
/ 17 марта 2012

Если я правильно понял, вы можете достичь того, что вы хотите, используя $.inArray и обернув зарезервированное слово тегом span.См. Мою DEMO

Редактировать: Ниже приведена документация jQuery $ .inArray.

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

value Значение для поиска.

arrayAn массив для поиска.

fromIndex Индекс массива вс чего начать поиск.По умолчанию 0, что будет искать весь массив.

.. читать дальше ..

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 голосов
/ 17 марта 2012

Я задавал себе этот вопрос несколько месяцев назад, после долгих поисков, я нашел это:

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

, который я добавил в следующий плагин jQuery: 

$.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();
            }
        })
    }
}

У него нет способа «отменить» перенос ключевых слов, но он соответствует моим потребностям.

Если вам нужен пример, как реализовать это, я был бы рад сделать его, если выпредоставьте текст, на котором я смогу его проверить ....

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...