En este tutorial veremos como resaltar texto (highlight) de una página web (html). Comúnmente esta técnica es utilizada para mostrar las palabras o partes de ellas en los resultados de una búsqueda.
Pueden ver el ejemplo en vivo acá y descargar los archivos del tutorial acá.
- Creamos un archivo
html.1
2
3
4
5
6
7
8
9<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Resaltar textos con jquery - bakía</title>
</head>
<body>
</body>
</html> - Dentro de la etiqueta
<head>insertamos la última librería de jQuery.1
2
3
4
5
6<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Resaltar textos con jquery - bakía</title>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
</head> - Dentro de la etiqueta
<body>insertamos un<div id="texto">en el cual estará el texto que vamos a resaltar.1
2
3
4
5
6
7
8<body>
<div id="texto">
bakia Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body> - Ahora insertamos un cuadro de texto donde pondremos la palabra a buscar y un botón que accionará una función de javascript que resalte el texto.
1
2
3
4
5
6
7
8
9.
..
...
<body>
<input type="text" id="cajaTexto"/>
<input type="button" value="resaltar" onClick="resaltarTexto();"/>
...
..
. - En la etiqueta
<head>creamos una función extendida de jQuery que se encarge de resaltar el texto.resaltarTexto();.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19.
..
...
<script type="text/javascript">
jQuery.fn.extend({
resaltar: function(busqueda, claseCSSbusqueda){
var regex = new RegExp("(<[^>]*>)|("+ busqueda.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +')', 'ig');
var nuevoHtml=this.html(this.html().replace(regex, function(a, b, c){
return (a.charAt(0) == "<") ? a : "<span class=\""+ claseCSSbusqueda +"\">" + c + "</span>";
}));
return nuevoHtml;
}
});
</script>
</head>
...
..
.Está función se acciona a travez de un selector de jQuery, es decir así
$("#DIV").resaltar("texto a resaltar",claseCSS);. Está función recibe dos variables.
1) busqueda: esta es el texto a resaltar.
2) claseCSSbusqueda: esta es la clase CSS que se insertará en los distintos resultados que encuentre la función.Es decir si tenemos el siguiente texto:
1
2bakia Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis....y buscamos la palabra bakia, debemos llamar la función de la siguiente forma:
$("#DIV").resaltar("bakia","resaltarTexto");
el resultado debe ser:1
2<span class="resaltarTexto">bakia</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis....Esto nos permite crear un estilo CSS específico para estos resultados de busqueda.
- Ahora entonces debemos crear la función
resaltarTexto(), en donde llamaremos a la función extendida de jQuery.1
2
3
4
5
6
7
8
9
10.
..
...
function resaltarTexto(){
$("#texto").resaltar(cajaTexto.value, "resaltarTexto");
}
</script>
...
..
.Ahora entonces la función de extendida de jQuery buscará en el
<div id="texto">todos las coincidencias del<input type="text" id="cajaTexto"/>y les pondrá la clase"resaltarTexto" - Para finalizar debemos insertar los estilos para la clase CSS
"resaltarTexto".1
2
3
4
5
6
7
8
9
10
11
12
13
14.
..
...
<style>
.resaltarTexto{
color: #F3AA04;
background-color: #FFFF96;
}
</style>
</head>
...
..
. -
El resultado final de nuestro archivo html debe ser el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Resaltar textos con jquery - bakía</title>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
jQuery.fn.extend({
resaltar: function(busqueda, claseCSSbusqueda){
var regex = new RegExp("(<[^>]*>)|("+ busqueda.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +')', 'ig');
var nuevoHtml=this.html(this.html().replace(regex, function(a, b, c){
return (a.charAt(0) == "<") ? a : "<span class=\""+ claseCSSbusqueda +"\">" + c + "</span>";
}));
return nuevoHtml;
}
});
function resaltarTexto(){
$("#texto").resaltar(cajaTexto.value, "resaltarTexto");
}
</script>
<style>
.resaltarTexto{
color: #F3AA04;
background-color: #FFFF96;
}
</style>
</head>
<body>
<input type="text" id="cajaTexto"/>
<input type="button" value="resaltar" onClick="resaltarTexto();"/>
<div id="texto">
bakia Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Parecerá gracioso, pero no encontraba una función que haga exactamente eso, solo buscar en la misma web! Ademas que la podemos modificar, maravilloso. Simplemente gracias al que posteó el artículo.
Buy Tamoxifen India canadian pharmacy cialis 20mg Priligy Tijuana Achat De Cytotec Priligy Spain
Excelente funcion, pero se le podria agregar algo como en el navegador crome el buscador, por ejemplo pongo una palabra y me reconosca si es minuscula o mayuscula tilde sin tilde etc…
despues de mucho mucho buscar, es lo mejor que encontre!!!! Excelente ayuda!!! mil felicidades!!! explicado de lujo… no falle!!! muchas gracias… muchas gracias. gracias… gracias.
Para “resetear” reemplazas los span que crea la función resaltarTexto() con este código
$(‘#texto’).find(“span”).each(function () {
$(this).replaceWith(function () {
return $(this).text();
});
});
gracias genial, me sirvió de mucho, pero como le hago para que limpie lo que se resalto
Con esto consigues formatear el texto pero no puedes hacer otra busqueda, eso todavia con lo he conseguido, pero siempre puedes hacer un F5.
Debajo de la funcion resaltarTexto:
function resetTexto(){
$(“#texto”).resaltar(cajaTexto.value, “resetTexto”);
En el style
.resetTexto{
color: #000000;
background-color: #FFFFFF;
Agregar un input:
ESTE ES EL CORRECTO:
Con esto consigues formatear el texto pero no puedes hacer otra busqueda, eso todavia no lo he conseguido, pero siempre puedes hacer un F5.
Debajo de la funcion resaltarTexto:
function resetTexto(){
$(“#texto”).resaltar(cajaTexto.value, “resetTexto”);
En el style
.resetTexto{
color: #000000;
background-color: #FFFFFF;
Agregar un input:
oye y como se le puede hacer para lo inverso supongamos que ya busco y quiere limpiar la busqueda?
Hola esta genial su tutorial, pero tengo una pregunta el buscador “busca” la palabra de forma exacta,
me gustaría extenderlo un poco para que detecte singulares y plurales por ejemplo, si busco la palabra “mensaje de datos” para que busque también los resultados que encuentre como “mensajes de datos” o viceversa, alguna idea ?
que buen tutorial
Hola, está página me sirvió demasiado para mi aplicación, está muy completa gracias!!