2011-05-20 13 views
6

estoy usando el plugin jquery.highlight: http://code.google.com/p/gce-empire/source/browse/trunk/jquery.highlight.js?r=2Resaltar palabras con (y sin) los caracteres acentuados/diacríticos en jQuery

lo estoy usando para resaltar los resultados de búsqueda.

El problema es que si busco algo así como "café" no va a poner de relieve las palabras.

Y si busco "café", a pesar de que mis resultados contiene tanto "café" & "café", se solamente resaltar "cafe".

Por lo tanto, necesitaría resaltar todas las "versiones" de las palabras, con o sin diacríticos.

¿Es esto posible?

+0

Consulte la respuesta de casablanca aquí: http://stackoverflow.com/questions/4261740/accent-insensitive-regex. Básicamente, realice modificaciones alrededor de la línea 91 de jquery.highlight.js, de modo que la expresión regular ahora contenga clases de caracteres. Tal vez agregue una opción "acentos insensibles" alrededor de la línea 83. – anon

+0

Gracias, pero estoy un poco perdido sobre cómo implementar eso en mi código ... – Santiago

+0

Ok. He agregado una implementación a continuación. – anon

Respuesta

3

http://jsfiddle.net/nHGU6/

HTML Test:

 
<div id="wrapper-accent-sensitive"> 
<p>cafe</p> 
<p>asdf</p> 
<p>café</p> 
</div> 
<hr /> 
<div id="wrapper-not-accent-sensitive">> 
<p>cafe</p> 
<p>asdf</p> 
<p>café</p> 
</div> 

Prueba de CSS:

 
.yellow { 
    background-color: #ffff00; 
} 

reemplazo Javascript:

jQuery.fn.highlight = function (words, options) { 
    var accentedForms = { 
     'c': 'ç', 
     'e': 'é' 
    }; 

    var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false, accentInsensitive: false }; 
    jQuery.extend(settings, options); 

    if (settings.accentInsensitive) { 
     for (var s in accentedForms) { 
      words = words.replace(s, '[' + s + accentedForms[s] + ']'); 
     } 
    } 

    if (words.constructor === String) { 
     words = [words]; 
    } 

    var flag = settings.caseSensitive ? "" : "i"; 
    var pattern = "(" + words.join("|") + ")"; 
    if (settings.wordsOnly) { 
     pattern = "\\b" + pattern + "\\b"; 
    } 
    var re = new RegExp(pattern, flag); 

    return this.each(function() { 
     jQuery.highlight(this, re, settings.element, settings.className); 
    }); 
}; 

Código de ensayo:

$(document).ready(function() { 
    $("#wrapper-accent-sensitive").highlight("cafe", { className: 'yellow' }); 
    $("#wrapper-not-accent-sensitive").highlight("cafe", { className: 'yellow', accentInsensitive: true }); 
}); 
+0

Gracias, eso funciona bien, excepto con la opción "wordsOnly: true". Debe haber algún problema con el nuevo patrón: pattern = "\\ b" + pattern + "\\ b" ;. Además, ¿sabes cómo debería implementarse esta lista más completa de signos diacríticos en este código? http://lehelk.com/2011/05/06/script-to-remove-diacritics/ – Santiago

+0

Wow. Captura impresionante! Aparentemente, este no es un problema fácil. Mira esto: http://stackoverflow.com/questions/3693750/how-can-i-make-a-regular-expression-which-takes-accented-characters-into-account. En este caso, puede usar la biblioteca XRegExp. En cuanto a la eliminación/normalización de los signos diacríticos (que sería la solución de Tchrist a la que se hace referencia en mi comentario anterior), tal vez pueda consultar http://rishida.net/blog/?p=222. Aunque es bastante brutal. – anon

Cuestiones relacionadas