7

やろうとしていること: タイトルにある通り、単語が予約語であればCSSを設定したいです。

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

問題: いくつかの方法のドキュメントを参照しましたが (以下の参照セクションにあります)、どこに問題があるのか​​よくわかりません。問題を絞り込むために、私の質問は...

  1. .split()jQueryのメソッドでもありますか?
  2. ループを使用forして配列内のすべての単語を実行する必要がありますか (コードに予約語が含まれているかどうかを確認するため)、またはより良い方法 ( など.each()) はありますか?
  3. を使用する必要がある場合.each()、誰かが簡単な例を教えてください。ドキュメントの例がわかりません。

参考文献

4

2 に答える 2

4

$.inArray私が正しく理解していれば、予約語をspanタグでラップして使用することで、目的を達成できます。私のデモを見る

編集:以下は jQuery $.inArray ドキュメントからのものです。

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

value検索する値。

配列検索する配列。

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(' '));
});
于 2012-03-16T21:29:36.910 に答える
2

数か月前にこの質問を自問し、多くの検索を行った後、次のことがわかりました。

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

キーワードのラッピングを「元に戻す」方法はありませんが、私のニーズには合っていました。

これを実装する方法の例が必要な場合は、テストできるテキストを提供していただければ喜んで作成します....

于 2012-03-16T21:36:03.380 に答える