Establecer CSS del código cuando contiene palabras reservadas

Lo que intento hacer: Como se indica en el título, quiero establecer el CSS de una palabra si es una palabra reservada. Establecer CSS del código cuando contiene palabras reservadas

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: me he referido a la documentación de varios métodos (en la sección de referencias a continuación), pero no estoy muy seguro de dónde radican los problemas. Para reducir el problema abajo, mi pregunta (s) sería ...

Es .split() incluso un método en jQuery?
¿Debo usar un loop for para ejecutar todas las palabras en la matriz (para ver si el código contiene una palabra reservada) o hay un mejor enfoque (como .each())?
Si debería usar .each(), ¿podría alguien darme un ejemplo simple? No entiendo los ejemplos en la documentación.

Referencias

Fuente

2012-03-16 Rob

jQuery es JavaScript y utiliza métodos JavaScript todo el tiempo. Verifique esta publicación, puede ayudar mucho - http://stackoverflow.com/questions/784012/javascript-equivalent-of-phps-in-array –

['.split()'] (http: //www.w3schools .com/jsref/jsref_split.asp) es un método de cadena en JavaScript. Por lo tanto, también es un método de cadena en jQuery;). – Zeta

por cierto, $ .each() funciona un poco más lento que JS nativo para bucle (http://jsperf.com/jquery-vs-lowdash-loops/4), pero es mucho más conveniente de usar. Cuando no hay muchos elementos, prefiero .each(). Con más elementos, la diferencia de rendimiento comienza a mostrarse y, por lo general, utilizo un ciclo habitual para. –

Si he entendido bien, se puede lograr lo que quiere usando $.inArray y envolviendo la palabra reservada con una etiqueta span. Ver mi DEMO

Edición: A continuación se muestra la documentación jQuery $ .inArray.

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

valor valueThe a buscar.

arrayUna matriz a través de la cual buscar.

fromIndexEl índice de la matriz en la que comenzar la búsqueda. El valor predeterminado es 0, que buscará toda la matriz.

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

Fuente

2012-03-16 21:29:36

¡Genial! ¿Podría explicar el '$ .inArray (división [j], matriz)'? Principalmente la parte '$ .inArray'. – Rob

@MikeDtrick Ver mis ediciones. Puede leer más sobre esto claramente en la documentación de jQuery. –

Bien, gracias por su ayuda. – Rob

me hice esta pregunta hace unos meses, después de mucho buscar encontré esto:

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

cual addapted en el siguiente plugin de 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(); 
      } 
     }) 
    } 
}

No tiene una forma de 'deshacer' la palabra clave envoltura pero se adaptaba a mis necesidades.

Si necesita un ejemplo de cómo implementar esta estaría dispuesto a hacer uno si usted proporciona un texto que pueda probarlo en ....

Fuente

2012-03-16 21:36:03 sg3s

También se pueden capturar coincidencias parciales de cadenas mediante el uso de expresiones regulares; si espera una gran cantidad de palabras clave/texto, esto podría ser un poco pesado. Utiliza el elemento con el que lo usa como un ámbito para limitar los elementos a verificar. – sg3s

Tengo que admitir que esto es bastante complejo (comencé a usar jQuery hace aproximadamente un mes). Me alegra que hayas mencionado el complemento porque he seguido varios tutoriales sobre cómo configurar uno, pero no tengo idea de cómo "compilar" uno (si tiene sentido). ¿Guarda su plugin como un archivo '.js' y lo llama en un' id' o 'class' de una etiqueta? – Rob

Un complemento es básicamente solo una 'propiedad' que agrega al objeto jQuery; simplemente sucede que es una función así que se puede llamar usando llaves() ... Esto es solo JS básico; pero para obtener más información sobre cómo escribir un complemento, consulte [este enlace a un tutorial oficial] (http://docs.jquery.com/Plugins/Authoring) – sg3s

Establecer CSS del código cuando contiene palabras reservadas

Respuesta

Cuestiones relacionadas