Trabalhando com expresses regulares em Javasc...

http://www.tutsup.com/2014/04/20/expressoes-re...

Home JavaScript Trabalhando com expresses regulares em Javascript

Siga a gente

JavaScript

Trabalhando com
expresses
regulares em
Javascript
20 abril, 2014

Receba artigos por e-mail

Escreva seu endereo de e-mail:

Registrar-se

Luiz Otvio

Miranda

Expresses regulares em
Javascript (ou em qualquer
linguagem de programao)
so essenciais para
encontrar e/ou substituir
partes de uma string. Saiba
mais!
Expresses regulares em Javascript (ou
em qualquer linguagem de programao)
so uma forma para encontrar e/ou
substituir valores de uma determinada
string.

1 de 21

Escreva um artigo
O TutsUP no tem ns lucrativos, portanto, se
voc quiser contribuir com algum artigo
interessante, basta registrar-se, acessar a rea
administrativa e escrever. Mas lembre-se, somos
bastante criteriosos quanto ao nosso contedo,
por isso seu artigo poder passar por vrias
revises e alteraes para suprir a necessidade
de nossos leitores.

Categorias

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

Programao

on-the-y de partes do meu cdigo ou de

texto que algum escreve em uma pgina
HTML.
Em Javascript, especicamente, podemos
utilizar trs propriedades do objeto String
para trabalhar com o objeto RegExp (de
expresso regular): replace(), match() e
search().
Veremos mais sobre o objeto RegExp e
sobre as propriedades replace(), match()
e search() abaixo.
1 RegExp e Expresses regulares em
Javascript
2 Mtodos test e exec do objeto RegExp
2.1 test()
2.2 exec()
3 Mtodos replace, match e search

http://www.tutsup.com/2014/04/20/expressoes-re...

Sobre

Contato

HTML5 (3)
JavaScript (23)
jQuery (9)
Layout Responsivo (4)
Mysql (11)
PHP (83)
Curso de PHP (60)
Estruturas de controle PHP (6)
Estruturas condicionais PHP (2)
Laos de repetio PHP (4)
Exibir valores em PHP (3)
Operadores em PHP (8)
PHP Orientado a Objetos (19)
MVC em PHP (5)
WordPress (38)
Desenvolvimento WordPress (27)
Criar tema WordPress (16)
Plugins WordPress (2)
Temas WordPress (1)

3.1 Replace()
3.2 Match()
3.3 Search()
4 Aprendendo expresses regulares
4.1 Chaves [ e ]
5 Letras com \
6 Caracteres ., +, * e ?
7 Exemplos avanados e mais detalhes
8 Concluindo
9 Outras aulas

RegExp e Expresses
regulares em
Javascript
Voc pode criar uma expresso regular
explicitamente em Javascript utilizando o

2 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

Para criar uma expresso regular

utilizando o objeto RegExp, utilize o
seguinte cdigo:
1

var regular_expression = new RegExp

Ou se preferir, utilize um literal com duas

barras antes e depois da expresso
regular (/expresso/):
1

var regular_expression = /valor/

O mtodo literal o mtodo que eu

sempre utilizo.
Em ambos os mtodos, eu estaria
procurando pela palavra "valor" em uma
string, por exemplo:
1

// Expresso regular

var regular_expression = /valor/

3
4

// Varivel do tipo string

var variable = 'Oi, sou uma varivel. \n '

'Sei que tenho um valor';

7
8

// Retorna true, pois existe a palavra valor na st

alert( regular_expression.test(

Mtodos test e exec do

objeto RegExp
O objeto RegExp contm apenas dois
mtodos para serem utilizados, exec() e
test(), cada um para uma funo
diferente.

3 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

encontrado na string e retorna um valor

booleano (true ou false) para testes
condicionais, por exemplo:
1

// Expresso regular

var minha_expressao = /valor/;

3
4

// Varivel do tipo string

var minha_string = 'Oi, sou uma varivel do tipo

'Sei que tenho um valor';

7
8

// Verifica se a palavra existe na string

if ( minha_expressao.test( minha_string

10

// Alerta se existir

11

alert('Existe a palavra valor na string.'

12

} else {

13

// Alerta se no existir

14

alert('No encontrei a palavra valor na strin

15

No trecho acima, "testei" para ver se a

palavra "valor" (com letras minsculas)
existe na string, como existe, a parte
minha_expressao.test(
minha_string ) ir retornar um valor
booleano "true" e o alerta falando que a
palavra existe ser exibido.
As expresses regulares diferenciam
letras maisculas de letras minsculas, ou
seja, "valor" totalmente diferente de
"Valor". Porm, voc pode utilizar
modicadores para determinar que a
expresso regular no deve diferenciar
letras maisculas de minsculas.

4 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

Modicador Descrio
i

Desconsidera letras
maisculas e minsculas

Verica toda a string

(global)

Checa todas as linhas da

string (multiline)

Os modicadores so extremamente
importantes para que sua expresso
regular funcione de maneira adequada, e
voc sempre vai utiliz-los, por isso, vou
detalhar os trs mais um pouco para que
voc entenda.
O modicador i fora o processo da
expresso regular a desconsidera letras
maisculas e minsculas, assim, "Valor" e
"valor" sero a mesma coisa.
O modicador g faz com que o processo
da expresso regular seja global, ou seja,
encontra todas as ocorrncias do valor
determinado na string. Se voc no
utilizar este modicador, o processo ir
parar quando encontrar o primeiro valor
correspondente sua expresso regular.
O modicador m (multiline) permite que
voc utilize outros caracteres especcos
de incio (^) e m ($) de linha. Vou falar
sobre eles mais adiante neste artigo.
Se voc criar o objeto RegExp
explicitamente, deve passar os
modicadores como o segundo
parmetro da funo, por exemplo:

5 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

Se criar o valor literalmente, deve passar

os modicadores aps a ltima barra:
1

// Expresso regular

var minha_expressao = /Valor/ig;

exec()
Um pouco diferente de test(), exec()
retorna o valor pesquisado na posio 0
de um array, alm disso, ainda retorna
uma propriedade "index" ou "lastIndex"
com a ltima posio onde o valor foi
encontrado. Voc pode utilizar um lao
while para exibir a ltima posio onde o
valor foi encontrado.
1

// Expresso regular

var minha_expressao = /a/ig;

3
4

// Varivel do tipo string

var minha_string = 'Oi, sou uma varivel do tipo

'Sei que tenho um valor';

7
8

// Varivel para receber os valores

var resultado = minha_expressao

10
11

// Valor pesquisado

12

document.write('Encontrei o valor: '

13

6 de 21

14

// Lao para exibir as posies

15

while ( resultado ) {

16

document.write( 'Posio: '

17

resultado = minha_expressao

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

pesquisando por todas as ocorrncias (g)

do caractere a maisculo ou minsculo (i)
dentro da varivel minha_string.
1

// Expresso regular

var minha_expressao = /a/ig;

3
4

// Varivel do tipo string

var minha_string = 'Oi, sou uma varivel do tipo s

'Sei que tenho um valor';

7
8

// Varivel para receber os valores

var resultado = minha_expressao.

Em seguida, exibimos o resultado

encontrado (que se encontra na chave 0
do array gerado):
1

// Valor pesquisado

document.write('Encontrei o valor: '

Por m, utilizamos um lao while para

exibir as posies em que o valor foi
encontrado.
1

// Lao para exibir as posies

while ( resultado ) {

document.write( 'Posio: '

resultado = minha_expressao.

Como estamos testando novamente o

resultado a cada volta do lao:
1

7 de 21

resultado = minha_expressao.exec

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

atribudo ao array "resultado" para que o

lao termine.
Como resultado, teremos o seguinte:
1

Encontrei o valor: a

Posio: 10

Posio: 13

Posio: 57

Mtodos replace,
match e search
Apesar dos mtodos do objeto RegExp
serem bastante teis, podemos utilizar os
mtodos do objeto string replace, match
e search para substituir, encontrar
valores e encontrar posies de valores
em uma string utilizando expresses
regulares.

Replace()
O mtodo replace() pode ser utilizado
para substituir as ocorrncias de uma
expresso regular em uma varivel, por
exemplo:
1

// Expresso regular

var minha_expressao = /valor/ig

3
4

// Varivel do tipo string

var minha_string = 'Oi, sou uma varivel do tipo

'Sei que tenho um valor';

8 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up
10

Web Design
// Sei que tenho um VALOR

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

No trecho acima, estou pesquisando pela

palavra "valor" em toda a varivel (g), com
letras maisculas ou minsculas (i).
1

// Expresso regular

var minha_expressao = /valor/ig;

3
4

// Varivel do tipo string

var minha_string = 'Oi, sou uma varivel do tipo s

'Sei que tenho um valor';

Em seguida, utilizo o trecho a seguir:

1

minha_string.replace(minha_expressao

Para substituir a expresso encontrada

pela palavra "VALOR". O resultado ser:
1

Oi, sou uma varivel do tipo string

Sei que tenho um VALOR

Match()
Match simplesmente encontra as
ocorrncias dependendo da sua
expresso regular, por exemplo:
1

// Expresso regular

var minha_expressao = /a/ig;

3
4

// Varivel do tipo string

var minha_string = 'Oi, sou uma varivel do tipo s

'Sei que tenho um valor';

9 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

importante lembrar que match()

retorna um array com todas as
ocorrncias da expresso regular, e voc
pode utilizar este array como quiser.
1

// Expresso regular

var minha_expressao = /a/ig;

3
4

// Varivel do tipo string

var minha_string = 'Oi, sou uma varivel do tipo

'Sei que tenho um valor';

7
8

// Configura uma varivel para receber o valor

var resultado = minha_string.match

10
11

alert( 'Encontrei ' + resultado

12

// Resultado: Encontrei 3 valores

Search()
Search() procura por um valor dentro de
uma string e retorna o valor da posio
em que ela foi encontrada. Se nada for
encontrado, retorna -1.
Exemplo:
1

// Expresso regular

var minha_expressao = /a/ig;

3
4

// Varivel do tipo string

var minha_string = 'Oi, sou uma varivel do tipo s

'Sei que tenho um valor';

10 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

O resultado sendo 10, indica que a

primeira ocorrncia da nossa expresso
regular foi encontrada na posio 10 da
string.

Aprendendo
expresses regulares
At agora, passei vrios tipos de
expresses regulares onde voc sabe
exatamente qual o valor que voc est
procurando, porm, pode acontecer casos
em que voc no sabe exatamente o valor
que voc quer encontrar, assim podemos
utilizar uma espcie de mscara para
encontrar o que desejamos.
Para isso, podemos utilizar vrios
caracteres programados exatamente para
encontrar o que desejamos.
Nos exemplos a seguir, vamos utilizar
replace() para substituir os caracteres
que estamos procurando para "#".

Chaves [ e ]
As chaves podem ser utilizadas para
especicar um range de caracteres, por
exemplo, de A a Z, de 0 a 9 e assim por
diante, por exemplo:
1

// Expresso regular

var minha_expressao = /[a-z]/ig;

3
4

11 de 21

// Varivel do tipo string

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

http://www.tutsup.com/2014/04/20/expressoes-re...

tuts up
7

Web Design
Programao
alert( minha_string.replace( minha_expressao

// Resultado: #### 0123456789

Sobre

Contato

A expresso regular /[a-z]/ig encontra

todas as ocorrncias de letras de A at Z
em uma string.
O mesmo poderia ser atingido com o
seguinte:
1

// Expresso regular

var minha_expressao = /\D/g;

O \D representa qualquer caractere que

no seja um nmero, porm, o espao
tambm seria substitudo para #.
Se voc quiser encontrar todos os
nmeros, pode utilizar:
1

// Expresso regular

var minha_expressao = /\d/g;

3
4

// Varivel do tipo string

var minha_string = 'ABCD 0123456789'

6
7

alert( minha_string.replace( minha_expressao

// Resultado: ABCD ##########

O caractere \d signica todos os nmeros.

Ou o mesmo que [0-9].

Letras com \
Veja a lista de letras que podem ser
utilizadas com a barra invertida (\) na
tabela abaixo:

12 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

alfanumrico.
\W

Encontra um caractere no
alfanumrico.

\d

Um nmero

\D

Qualquer caractere que no

seja um nmero

\s

Um espao

\S

Qualquer caractere que no

seja um espao

\b

Encontra um caractere no
comeo ou m da palavra

\B

Encontra um caractere no
meio da palavra

\0

Caractere nulo

\n

Encontra uma nova linha

\f

Encontra uma quebra de

pgina

\r

Encontra uma nova linha

com CR

\t

Encontra um tab

\v

Encontra um tab vertical

Caracteres ., +, * e ?
Quatro dos caracteres de expresses
regulares so utilizados para encontrar
ocorrncias especcas de caracteres em
uma string: o ponto (.), o asterisco (*), o
sinal de + (+) e o ponto de interrogao (?).
Caractere

13 de 21

Descrio

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

precedente zero ou
mais vezes
Sinal de mais (+)

Um caractere
precedente um ou
mais vezes

Ponto de
interrogao (?)

Um ou nenhum
caractere

Ponto (.)

Um caractere apenas

Com isso podemos utilizar duas

combinaes de caracteres interessantes,
a greedy match (.*) e a lazy star (.*?).
Em greedy match (.*), devido a um ponto
(.) poder representar qualquer caractere,
o asterisco encontra as correspondncias
at a ltima ocorrncia de um padro. Por
exemplo:
1

// Expresso regular

var minha_expressao = /<p>.*<\/p

3
4

// Varivel do tipo string

var minha_string = '<h1>Meu texto HTML</h1><p>par

6
7

alert( minha_string.replace( minha_expressao

// Resultado: <h1>Meu texto HTML</h1>#

Neste caso, utilizei o .* para substituir

qualquer <p>qualquer coisa</p>.
O padro lazy star (.*?), faz com que a
pesquisa termine na segunda ocorrncia:

14 de 21

// Expresso regular

var minha_expressao = /<p>.*?<\/

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

http://www.tutsup.com/2014/04/20/expressoes-re...

tuts up
5

Web Design
Programao
Sobre
var minha_string = '<h1>Meu texto HTML</h1><p>par

Contato

6
7

alert( minha_string.replace( minha_expressao

// Resultado: <h1>Meu texto HTML</h1>#<p>pargrafo

Ambos so padres bastante teis de se

utilizar.
Voc pode encontrar mais exemplos em
JavaScript RegExp Object.

Exemplos avanados
e mais detalhes
Veja abaixo alguns exemplos mais
avanados sobre expresses regulares:
1

// Expresso regular

var minha_expressao = /\d{2}\/\d

3
4

// Varivel do tipo string

var minha_string = 'Hoje 20/04/2014. Mas ontem f

6
7

alert( minha_string.match( minha_expressao

// Resultado: Array('20/04/2014', '19/04/2014');

Perceba o formato de data que utilizamos

no Brasil (20/04/2014). Este formato
constitudo de um nmero de dois
nmeros, uma barra, mais dois nmeros,
outra barra, quatro nmeros. Podemos
converter isso na seguinte expresso
regular: /\d{2}\/\d{2}\/\d{4}/g.
\d Qualquer nmero
{2} De dois caracteres

15 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

\/ Uma barra literal

\d Qualquer nmero
{4} De quatro caracteres
Voc pode especicar a quantidade de
caracteres que deseja utilizando colchetes
(exemplo: {2}). A barra invertida serve
como caractere de escape para qualquer
caractere que no poderia ser utilizado
como literal em uma expresso regular.
Este exemplo falho porque uma pessoa
poderia utilizar uma data 99/99/9999 e
sua expresso regular aceitaria, para
corrigir isso, eu faria o seguinte:
1

// Expresso regular

var minha_expressao = /[0-3]{1}[

Neste caso limitamos bastante nossos

nmeros.
[0-3]{1} Qualquer nmero de 0
a 3 (apenas um nmero)
[0-9]{1} Qualquer nmero de 0
a 9 (apenas um nmero)
\/ Uma barra literal
[0-1]{1} Qualquer nmero de 0
a 1 (Apenas um nmero)
[0-9]{1} Qualquer nmero de 0
a 9 (apenas um nmero)
\/ Uma barra literal
\d{4} Qualquer nmero de
quatro dgitos
Apesar de a data 39/19/2014 ainda ser
considerada correta por esta expresso
regular, j reduzimos bastante o risco da
data 99/99/9999 ser vlida.

16 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

Expresses regulares podem ser bastante

confusas no incio, porm, voc vai
aprendendo enquanto vai as utilizando.
Minha recomendao que voc faa
testes com vrios tipos de strings para
encontrar determinados valores. Se tiver
dvidas, basta perguntar nos
comentrios.
Veja mais um link til que ajudou a
construir este artigo:
Regular Expressions MDN
Espero que ajude voc tambm.

Outras aulas
Caso tenha perdido a aula anterior, segue
o link:
Objetos nativos Javascript
(String, Number e Boolean)
Prxima aula:
Objeto Date em Javascript
(Datas)
Caso queira visualizar todas as aulas
dessa sesso em ordem cronolgica
invertida:
Curso de Javascript

"Trabalhando com
expresses regulares
17 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

Se voc achou este artigo til, ajude-nos a

manter nosso servidor online. Faa uma
doao no valor que desejar.

Tags: Curso de Javascript,

Expresses regulares, Javascript

Objetos nativos Javascript (String,
Number e Boolean)
Objeto Date em Javascript (Datas)

Por Luiz Otvio

Miranda
Meu nome Luiz
Otvio e tenho 27 anos.
Trabalho com tecnologia h cerca
de 10 anos. J atuei em alguns
setores na rea de tecnologia, como
assistncia tcnica em
computadores, administrador de
redes, desenvolvedor de sites e
sistemas, alm de outros.
Atualmente, trabalho em um
provedor de Internet
desenvolvendo sistemas em PHP (e
algumas outras linguagens) para
automatizar servios realizados pela
empresa. Trabalho com servidores
Linux e Windows.
Ver todos os artigos de Luiz Otvio

18 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

Google+ Twitter

19 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Web Design

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

Objetos nativos
Javascript (String,
Number e Boolean)
Objetos nativos Javascript
so objetos que envolvem
tipos primitivos de dados
(String, Number e Boolean).
Hoje veremos tais objetos e
suas propriedades.

Estruturas condicionais
Javascript
Estruturas condicionais
Javascript so responsveis
por alterar o uxo da sua
aplicao atravs de
condies. Saiba um pouco
mais sobre eles nesse
artigo.

20 de 21

04-11-2014 16:32

Trabalhando com expresses regulares em Javasc...

tuts up

Comentrios

Web Design

Community

http://www.tutsup.com/2014/04/20/expressoes-re...

Programao

Sobre

Contato

Entrar

Ordenar por Melhor avaliado

Favorito
Compartilhar

Participe da discusso
Fernando

um ms atrs

Cara, milhares foi foda.

Responder

Compartilhar
Luiz Otvio
Miranda Figueiredo
Mod > Fernando
um ms atrs

verdade, depois mudo

para "alguns"! Obrigado
pela dica.
Responder

Compartilhar

TAMBM EM TUTSUP

O QUE ISSO?

Draggable,
sortable e

Utilizando
estrutura MVC

1 comentrio 5 dias
atrs

15 comentrios 2
meses atrs

AvatarAmanda Rios
Ulitska Seu
blog

AvatarLuiz Otvio
Miranda
Figueiredo

Tutsup 2014 - Tema por Luiz Otvio Miranda

21 de 21

04-11-2014 16:32