Home » AS3 »Avanzado »CSS » Currently Reading:

Busquedas de palabras en textos con expresiones regulares

enero 23, 2009 AS3, Avanzado, CSS 13 Comments
Busquedas de palabras en textos con expresiones regulares

Este es un ejemplo de 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

  1. 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.

  1. 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.

  1. 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.

  1. var patron:RegExp = new RegExp("(^| )" + input.text + "[\ .,]","gi");
  2. var busqueda:Array = texto.text.match(patron);
  3. 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.

  1. var estilo:StyleSheet = new StyleSheet();
  2. estilo.parseCSS(".select{fontWeight:bold; color: #FF0000; text-decoration: underline;}");
  3. 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.

  1. texto.htmlText = texto.text.replace(patron,setSpan);
  2.  
  3. function setSpan(txt:String, ...rest):String
  4. {
  5.     var patron:RegExp = new RegExp(input.text,"i");
  6.     var tag:String = txt.replace(patron,"<span class='select'>$&</span>");
  7.     return tag;
  8. }

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

Este es el código completo:

  1. var estilo:StyleSheet = new StyleSheet();
  2. estilo.parseCSS(".select{fontWeight:bold; color: #FF0000; text-decoration: underline;}");
  3. texto.styleSheet = estilo;
  4.  
  5. boton.addEventListener(MouseEvent.CLICK, buscaPalabra);
  6.  
  7. function buscaPalabra(e:MouseEvent=null):void
  8. {
  9.     var patron:RegExp = new RegExp("(^| )" + input.text + "[\ .,]","gi");
  10.     var busqueda:Array = texto.text.match(patron);
  11.     output.text = "Total: " + busqueda.length;
  12.     texto.htmlText = texto.text.replace(patron,setSpan);
  13. }
  14. function setSpan(txt:String, ...rest):String
  15. {
  16.     var patron:RegExp = new RegExp(input.text,"i");
  17.     var tag:String = txt.replace(patron,"<span class='select'>$&</span>");
  18.     return tag;
  19. }
  20.  
  21. buscaPalabra();

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

Compártelo:

Busquedas de palabras en textos con expresiones regulares
Visto 7.113 veces

Currently there are "13 comments" on this Article:

  1. Interesante lo usare en un pequeño projecto que estoy haciendo.
    La verdad nunca habria pensado en usar expresiones regulares.
    Gracias.

  2. Hernan dice:

    Muy util, de paso, acabo de aprender a usar css en un campo de texto en Flash, asi que 2 X 1.

  3. isantos dice:

    muchas gracias por la info…

    apenas estaba sufriendo con algo parecido…

    saludos… ;)
    __________
    Necesitas una agenda para tus pacientes?
    Agenda Business Customer
    http : // www . ddsmedia . net

  4. marcos dice:

    Buenísimo, muy bien detallado, me servirá mucho, gracias

  5. Tito dice:

    Hola, estoy empezando en esto del ActionScript y ando bastante perdido, cada paso que doy me surgen más y más dudas :P
    Veréis, estoy intentado hacer que un archivo flash cargue un archivo de texto externo el cual contiene una lista de palabras, eso creo que lo consigo con:

    var request:URLRequest = new URLRequest(“mitexto.txt”);
    var loader:URLLoader = new URLLoader();
    loader.load(request);

    He de decir que la lista de palabras del archivo de texto está separada por INTROS y todas están en mayúsculas tal que así:

    ANTE
    ANTENA
    ANTENISTA
    BALA
    BALAR

    Ahora el problema viene en lo que quiero crear, es simplemente una caja de búsqueda en la cual consta de una caja de introducción de texto, un botón para buscar y un texto dinámico que me devuelva un mensaje diciendo si ha encontrado la palabra o no dentro de ese archivo de texto.

    Seguro que es más fácil de lo que parece, pero no doy con ello. Te agradecería me ayudaras ya que veo por tu web y tutoriales dominas mucho ActionScript.

    Gracias de antemano

    Un saludo.

  6. admin dice:

    @Tito:

    Para hacer esas comprobaciones tienes la función Test(). Sería algo así:

    Te devolvería true o false según si encuentra la coincidencia.

  7. Tito dice:

    Gracias por la informacion, pero me da errores y no se que falta o que sobra. Tengo:

    – 1 boton con nombre de instancia “boton”
    – 1 caja de introduccion de texto con nombre de instancia “textoabuscar”
    – 1 texto dinamico con nombre de instancia “salidabusqueda”
    – el archivo de texto llamado “diccionario.txt”

    Y este es el código el cual me da errores y ya no se que poner ni que quitar:
    ————————
    stop();
    var request:URLRequest = new URLRequest(“diccionario.txt”);
    var loader:URLLoader = new URLLoader();
    loader.load(request);

    buscar.addEventListener(MouseEvent.CLICK, func_buscar);
    function func_buscar(e:MouseEvent=null):void
    {
    var textoabuscar:RegExp = new RegExp(“(^| )” + textoabuscar.text + “[\ .,]“,”gi”);
    var busquedadetexto:Array = “diccionario.txt”.match(textoabuscar);
    salidabusqueda.text = “Total: ” + busquedadetexto.length;
    }
    ———————–
    Que me falta por poner y por quitar? esto es desesperante.
    Gracias de antemano

  8. zguillez dice:

    Mira, este código completo hace más o menos lo que quieres:

  9. Tito dice:

    Muchisimas gracias, ahora si me funciona y hubiese sido imposible haberlo conseguido por mi mismo que estoy demasiado verde aun

    Gracias!

  10. Tito dice:

    Hola de nuevo, otra duda que me surge y no he podido encontrar solucion por ningun sitio:

    Aplico a un campo de introduccion de texto la propiedad .restric para que lo que escriba sea en mayusculas:

    Asi solo se pueden introducir mayusculas, ni caracteres especiales ni numeros ni nada, sol mayusculas:
    miTexto.text.restrict = (A-Z);

    Y asi se puede introducir de todo menos minusculas que es lo que yo quiero:
    miTexto.text.restrict = (^a-z);

    El problema viene con la letra Ñ que no sale, ¿sabéis cómo hay que escribirlo o alguna forma de hacerlo?

    Gracias

  11. admin dice:

    @Tito:
    ¿Y por que no haces una función que te pase todo lo que se escriba a mayúsculas?

  12. Tito dice:

    Pues porque no sabía como escribirlo :)

    Muchas gracias de nuevo, que la vida os lo pague con muchos intentos de hacer hijos

    Gracias!

  13. Paul dice:

    Ayuda porfa alguien sabe como puedo realizar una busqueda similar a la de google o la de encarta premium 2009, etc. en actionscript 3 que al momento de escribir una palbra te aparece ya una serie de opciones. gracias por la ayuda

Comment on this Article:








× 5 = veinte cinco

Usuarios

Usuarios registrados: 3,432

Recibe las novedades por email

Map

AdvertisementAdvertisementAdvertisementAdvertisement

Post destacado

Panel de zoom de imágenes en Flex

13 abr 2009

Este ejemplo es, igual que hice en el post anterior, un ejemplo que he adaptado a Flex desde un ejemplo que hice hace tiempo para Flash. Se trata de un panel donde se ve un zoom de una parte de una imagen. Este es el ejemplo montado en Flex: Y este es el código utilizado para la película principal: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 xmlns:ui="*"                 layout="absolute"                 creationComplete="ini()"                 width="505" …



Ranking

Media de 4.58 de 5 sobre 100 valoraciones

twitter-widget.com