Resaltador de palabras en html
Buenas! Os traigo un código en html que sirve básicamente para buscar una palabra en un texto en la web propia y resaltarlo del color que elijáis, funciona con code jquery así que necesita internet, pero bueno.
Ahí va:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>/Titulo de la web/</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">
<br><br><br>
/Titulo de caja/
<div style="overflow-y: scroll; overflow-x:hidden; width: 300px; height: 200px; background-color:write">
<ul>/texto/</ul>
Es solo copiar y listo, hale! a trastear y modificar :)
Este comentario ha sido eliminado por el autor.
ResponderEliminarMuchas gracias!!! me sirvió mucho.
ResponderEliminar