Hola
Un código algo mas optimizado. Es case insensitive. Ahora se deberán introducir 3 caracteres antes del highlight
Código Javascript
:
Ver original<?php
$url = file_get_contents('http://www.monografias.com/trabajos5/asp/asp.shtml', true);
$codigo = $url;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
<script type="text/javascript">
var cadena = '';
var largo_cadena = 0;
window.onload = function() {cadena = document.getElementById('texto').innerHTML; largo_cadena = cadena.length;};
function Resaltar(cadABuskar) {
var caracteresInput = cadABuskar.length;
if (caracteresInput == 2) {
document.getElementById('texto').innerHTML = cadena;
document.getElementById('terminos').style.border = '';
} else if (caracteresInput >= 3) {
var rgEx = new RegExp(cadABuskar, 'g\i');
if (cadena.substr(0,parseInt(largo_cadena)).match(rgEx)) {
var marca = cadena.substr(0,parseInt(largo_cadena)).replace(rgEx, function(coincidencia){return '<span style=\"background-color:#9ACD32;color:#FFF;\">' + coincidencia + '</span>';});
document.getElementById('texto').innerHTML = marca;
document.getElementById('terminos').style.border = 'solid #9ACD32 1px';
} else {
document.getElementById('texto').innerHTML = cadena;
document.getElementById('terminos').style.border = 'solid #FF0000 1px';
}
}
}
</script>
</head>
<body>
<form method="post" action="" name="" autocomplete="off">
Buscar Terminos: <input type="text" value="" id="terminos" onkeyup="Resaltar(this.value);" />
</form>
<div id="texto"><?php echo $codigo;?></div>
</body>
</html>
Parte de este código es gracias a
@zerokilled, gracias por ensañarme a usar funciones en el replace
Suerte