Busquedas de palabras en textos con expresiones regulares

Es este tip mostraré como realizar búsquedas de palabras dentro de cajas de texto haciendo uso de Expresiones Regulares de Actionscript 3.

Lo primero que haremos es crear un patrón con los caracteres de texto que queremos seleccionar. En este caso le indicaremos la palabra desde un TextInput

Código :

var patron:RegExp = new RegExp(input.text);

Este patrón nos encontrará la primera cadena de texto que coincida con los caracteres introducidos en el campo de texto. Si al patrón le añadimos el indicador g (global) hará que nos encuentre no solo la primera coincidencia sino todas las que haya en el texto. También le añadiremos el indicador i (ignoreCase) para que no haga distinción entre mayúsculas y minúsculas.

Código :

var patron:RegExp = new RegExp(input.text,"gi");

Ahora tendremos que solucionar el detalle de que nos encuentre palabras y no caracteres dentro de otras palabras. Es decir, si buscamos la palabra "mi" no queremos que nos la seleccione dentro de "camino". Para ello utilizaremos grupos de búsqueda. Indicaremos que solo nos interesa cuando despues de la coincidencia haya un espacio, un punto o una coma. Y por el otro lado indicaremos que haya un espacio o que sea inicio de párrafo.

Código :

var patron:RegExp = new RegExp("(^| )" + input.text + "[\ .,]","gi");

Utilizando este patrón dentro del método match() de la clase String podremos recuperar todas la concordancias que haya en el texto.

Código :

var patron:RegExp = new RegExp("(^| )" + input.text + "[\ .,]","gi");
var busqueda:Array = texto.text.match(patron);
output.text = "Total: " + busqueda.length;

Ahora haremos que las palabras encontradas queden resaltadas en negrita, color rojo y subrayado. Para ello empezaremos escribiendo un estilo CSS, y asignándolo al campo de texto.

Código :

var estilo:StyleSheet = new StyleSheet();
estilo.parseCSS(".select{fontWeight:bold; color: #FF0000; text-decoration: underline;}");
texto.styleSheet = estilo;

Con el método replace() de la clase String sustituiremos el contenido del patrón por un String que nos añadirá el tag que asignará el estilo CSS a la palabra. Como en el patrón hemos indicado que nos seleccione la palabra junto a los espacios en blanco o los puntos y comas, deberemos utilizar otro patrón que solo seleccione los caracteres de texto introducidos en el TextInput. Este segundo patrón lo colocaremos dentro de una función recursiva.

Código :

texto.htmlText = texto.text.replace(patron,setSpan);

function setSpan(txt:String, ...rest):String
{
   var patron:RegExp = new RegExp(input.text,"i");
   var tag:String = txt.replace(patron,"<span class='select'>$&</span>");
   return tag;
}

Ý listo, ya tenemos el ejemplo montado (coloquen una palabra en el TextInput y denle al botón):



Este es el código completo:

Código :

var estilo:StyleSheet = new StyleSheet();
estilo.parseCSS(".select{fontWeight:bold; color: #FF0000; text-decoration: underline;}");
texto.styleSheet = estilo;

boton.addEventListener(MouseEvent.CLICK, buscaPalabra);

function buscaPalabra(e:MouseEvent=null):void
{
   var patron:RegExp = new RegExp("(^| )" + input.text + "[\ .,]","gi");
   var busqueda:Array = texto.text.match(patron);
   output.text = "Total: " + busqueda.length;
   texto.htmlText = texto.text.replace(patron,setSpan);
}
function setSpan(txt:String, ...rest):String
{
   var patron:RegExp = new RegExp(input.text,"i");
   var tag:String = txt.replace(patron,"<span class='select'>$&</span>");
   return tag;
}

buscaPalabra();

Y aquí el archivo .FLA para descargar. (archivo CS4)

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.