Imposta CSS del codice quando contiene parole riservate

Cosa sto cercando di fare: Come indicato nel titolo, voglio impostare il CSS di una parola se è una parola riservata. Imposta CSS del codice quando contiene parole riservate

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

Problema: ho fatto riferimento alla documentazione per diversi metodi (nella sezione riferimenti di seguito), ma non sono troppo sicuro di dove si trova il problema (s). Per ridurre il problema verso il basso, la mia domanda (s) sarebbe ...

È .split() anche un metodo in jQuery?
Devo utilizzare un ciclo for per eseguire tutte le parole nell'array (per vedere se il codice contiene una parola riservata) oppure esiste un approccio migliore (ad esempio .each())?
Se dovessi usare .each(), qualcuno potrebbe darmi un semplice esempio? Non capisco gli esempi nella documentazione.

Riferimenti

fonte

2012-03-16 Rob

jQuery è JavaScript e utilizza metodi JavaScript per tutto il tempo. Controlla questo post, può essere di grande aiuto - http://stackoverflow.com/questions/784012/javascript-equivalent-of-phps-in-array –

['.split()'] (http: //www.w3schools .com/jsref/jsref_split.asp) è un metodo stringa in JavaScript. Quindi è anche un metodo stringa in jQuery;). – Zeta

btw, $ .each() si comporta un po 'più lentamente rispetto al JS nativo per loop (http://jsperf.com/jquery-vs-lowdash-loops/4), ma è molto più comodo da usare. Quando non ci sono molti elementi preferisco .each(). Con più elementi la differenza di prestazioni inizia a mostrare e quindi di solito uso un consueto ciclo for. –

se ho capito bene, è possibile ottenere ciò che si desidera utilizzare $.inArray e avvolge la parola riservata con un tag span. Vedere il mio DEMO

Modifica: Di seguito viene fornita la documentazione di jQuery $ .inArray.

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

valore valueThe da cercare.

array Un array attraverso il quale cercare.

fromIndexL'indice dell'array in cui iniziare la ricerca. Il valore predefinito di è 0, che cercherà l'intero array.

CSS

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

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

fonte

2012-03-16 21:29:36

Fantastico! Potresti per favore spiegare '$ .inArray (split [j], array)'? Principalmente la parte '$ .inArray'. – Rob

@MikeDtrick Vedi le mie modifiche. Puoi leggere maggiori informazioni in modo chiaro nella documentazione di jQuery. –

Ok, grazie per il tuo aiuto. – Rob

mi sono posto questa domanda qualche mese fa, dopo un sacco di ricerca ho trovato questo:

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

che ho addapted nella seguente plugin per 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(); 
      } 
     }) 
    } 
}

Esso non dispone di un modo per 'annullare' la parola involucro ma adatta alle mie esigenze.

Se avete bisogno di un esempio come implementare questa sarei felice di fare uno se si fornisce un testo che posso testarlo su ....

fonte

2012-03-16 21:36:03 sg3s

Può anche acquisire corrispondenze parziali di stringhe tramite l'uso di espressioni regolari; se ti aspetti un sacco di parole chiave/testo questo potrebbe essere un po 'pesante. Usa l'elemento con cui lo si utilizza come ambito per limitare gli elementi da controllare. – sg3s

Devo ammettere che è piuttosto complesso (ho iniziato a usare jQuery circa un mese fa). Sono felice che tu abbia menzionato il plugin perché ho seguito diversi tutorial su come crearne uno, ma non ho idea di come "compilarlo" (se questo ha senso). Salva il tuo plugin come un file '.js' e lo chiami in un' id' o 'classe' di un tag? – Rob

Un plugin è fondamentalmente solo una 'proprietà' che aggiungi all'oggetto jQuery; è solo una funzione, quindi può essere chiamato usando le parentesi() ... Questo è solo il JS di base; ma per maggiori informazioni su come scrivere un plugin controlla [questo link a un tutorial ufficiale] (http://docs.jquery.com/Plugins/Authoring) – sg3s

Imposta CSS del codice quando contiene parole riservate

risposta

Problemi correlati