Objeto JavaScript RegExp


Índice

    Mostrar índice


Uma expressão regular é uma sequência de caracteres que forma um padrão de pesquisa.

O padrão de pesquisa pode ser usado para pesquisa e substituição de texto operações.


O que é uma expressão regular?

Uma expressão regular é uma sequência de caracteres que forma uma pesquisa padrão.

Ao pesquisar dados em um texto, você pode usar esse padrão de pesquisa para descrever o que está procurando.

Uma expressão regular pode ser um único caractere ou um padrão mais complicado.

Expressões regulares podem ser usadas para realizar todos os tipos de pesquisa de texto e operações de substituição de texto.

Sintaxe

/pattern/modifiers;

Exemplo

/w3schools/i;

Exemplo explicado:

/w3schools/i é uma expressão regular.

w3schools é um padrão (para ser usado em uma pesquisa).

i é um modificador (modifica a pesquisa para não diferenciar maiúsculas de minúsculas).


Usando métodos de string

Em JavaScript, expressões regulares são frequentemente usadas com as duas strings métodos: search() e replace().

O método search() usa uma expressão para procurar um match e retorna a posição da partida.

O método replace() retorna uma string modificada onde o padrão é substituído.


Usando String search() com uma String

O método search() pesquisa uma string por um valor especificado e retorna a posição da correspondência:

Exemplo

Use uma string para fazer uma busca por "W3schools" em uma string:

let text = "Visit W3Schools!";
let n = text.search("W3Schools");

O resultado em n será:

6

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Search a string for &quot;W3Schools&quot;, and display the position of the match:</p>

<p id="demo"></p>

<script>
let text = "Visit W3Schools!"; 
let n = text.search("W3Schools");
document.getElementById("demo").innerHTML = n;
</script>

</body>
</html>


Usando String search() com uma expressão regular

Exemplo

Use uma expressão regular para fazer uma pesquisa sem distinção entre maiúsculas e minúsculas por "w3schools" em uma string:

let text = "Visit W3Schools";
let n = text.search(/w3schools/i);

O resultado em n será:

6

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search a string for "w3Schools", and display the position of the match:</p>

<p id="demo"></p>

<script>
let text = "Visit W3Schools!"; 
let n = text.search(/w3Schools/i);
document.getElementById("demo").innerHTML = n;
</script>

</body>
</html>



Usando String replace() com uma String

O método replace() substitui um valor especificado por outro valor em uma string:

let text = "Visit Microsoft!";
let result = text.replace("Microsoft", "W3Schools");

Experimente você mesmo →

<!DOCTYPE html>
<html>

<body>

<h1>JavaScript String Methods</h1>
<p>Replace &quot;Microsoft&quot; with &quot;W3Schools&quot; in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

</body>
</html>



Use String replace() com uma expressão regular

Exemplo

Use uma expressão regular que não diferencia maiúsculas de minúsculas para substituir Microsoft por W3Schools em uma string:

let text = "Visit Microsoft!";
let result = text.replace(/microsoft/i, "W3Schools");

O resultado em res será:

Visit W3Schools!

Experimente você mesmo →

<!DOCTYPE html>
<html>

<body>

<h2>JavaScript String Methods</h2>

<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace(/microsoft/i, "W3Schools");
}
</script>

</body>
</html>

Você percebeu?

Argumentos de expressão regular (em vez de argumentos de string) podem ser usados nos métodos acima.
Expressões regulares podem tornar sua pesquisa muito mais poderosa (sem distinção entre maiúsculas e minúsculas, por exemplo).


Modificadores de Expressão Regular

Modificadores podem ser usados para realizar pesquisas mais globais que não diferenciam maiúsculas de minúsculas:

Modificador:

i

Descrição: Executar correspondência sem distinção entre maiúsculas e minúsculas

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a case-insensitive search for "w3schools" in a string:</p>

<p id="demo"></p>

<script>
let text = "Visit W3Schools";
let result = text.match(/w3schools/i);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

g

Descrição: Execute uma correspondência global (encontre todas as correspondências em vez de parar após a primeira correspondência)

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for "is" in a string:</p>

<p id="demo"></p>

<script>
let text = "Is this all there is?";
let result = text.match(/is/g);
document.getElementById("demo").innerHTML = result; 
</script>

</body>
</html>

Modificador:

m

Descrição: Executar correspondência multilinha

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a multiline search for "is" at the beginning of each line in a string:</p>

<p id="demo"></p>

<script>
let text = "\nIs th\nis it?";
let result = text.match(/^is/m);
document.getElementById("demo").innerHTML = "Result is: " + result;
</script>

</body>
</html>

Padrões de Expressão Regular

Colchetes são usados para localizar uma série de caracteres:

Modificador:

[abc]

Descrição: Encontre qualquer um dos caracteres entre colchetes

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for the character "h" in a string:</p>

<p id="demo"></p>

<script>
let text = "Is this all there is?";
let result = text.match(/[h]/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

[0-9]

Descrição: Encontre qualquer um dos dígitos entre colchetes

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for the numbers 1 to 4 in a string:</p>

<p id="demo"></p>

<script>
let text = "123456789";
let result = text.match(/[1-4]/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

(x|y)

Descrição: Encontre qualquer uma das alternativas separadas por |

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for any of the specified alternatives (red|green):</p>

<p id="demo"></p>

<script>
let text = "re, green, red, green, gren, gr, blue, yellow";
let result = text.match(/(red|green)/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Metacaracteres são caracteres com um significado especial:

Modificador:

\d

Descrição: Encontre um dígito

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for digits in a string:</p>

<p id="demo"></p>

<script>
let text = "Give 100%!"; 
let result = text.match(/\d/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

\s

Descrição: Encontre um caractere de espaço em branco

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for whitespace characters in a string:</p>

<p id="demo"></p>

<script>
let text = "Is this all there is?";
let result = text.match(/\s/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

\b

Descrição: Encontre uma correspondência no início de uma palavra como esta: \bWORD, ou no final de uma palavra assim: PALAVRA\b

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search for the characters "LO" in the <b>beginning</b> of a word in the phrase:</p>
<p>"HELLO, LOOK AT YOU!"</p>

<p>Found in position: <span id="demo"></span></p>

<script>
let text = "HELLO, LOOK AT YOU!"; 
let result = text.search(/\bLO/);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search for the characters "LO" in the <b>end</b> of a word in the phrase:</p>
<p>"HELLO, LOOK AT YOU!"</p>

<p>Found in position: <span id="demo"></span></p>

<script>
let text = "HELLO, LOOK AT YOU!"; 
let result = text.search(/LO\b/);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

\uxxxx

Descrição: Encontre o caractere Unicode especificado pelo número hexadecimal xxxx

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for the hexadecimal number 0057 (W) in a string:</p>

<p id="demo"></p>

<script>
let text = "Visit W3Schools. Hello World!"; 
let result = text.match(/\u0057/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Quantificadores definem quantidades:

Modificador:

n+

Descrição: Corresponde a qualquer string que contenha pelo menos um n

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for at least one "o" in a string:</p>

<p id="demo"></p>

<script>
let text = "Hellooo World! Hello W3Schools!"; 
let result = text.match(/o+/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

n*

Descrição: Corresponde a qualquer string que contenha zero ou mais ocorrências de n

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for an "l", followed by zero or more "o" characters:</p>

<p id="demo"></p>

<script>
let text = "Hellooo World! Hello W3Schools!"; 
let result = text.match(/lo*/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

n?

Descrição: Corresponde a qualquer string que contenha zero ou uma ocorrência de n

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for a "1", followed by zero or one "0" characters:</p>

<p id="demo"></p>

<script>
let text = "1, 100 or 1000?";
let result = text.match(/10?/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Usando o objeto RegExp

Em JavaScript, o objeto RegExp é um objeto de expressão regular com propriedades e métodos predefinidos.


Usando teste()

O método test() é um método de expressão RegExp.

Ele procura um padrão em uma string e retorna verdadeiro ou falso, dependendo do resultado.

O exemplo a seguir pesquisa uma string pelo caractere "e":

Exemplo

const pattern = /e/;
pattern.test("The best things in life are free!");

Como existe um “e” na string, a saída do código acima será:

true

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search for an "e" in the next paragraph:</p>

<p id="p01">The best things in life are free!</p>

<p id="demo"></p>

<script>
let text = document.getElementById("p01").innerHTML;
const pattern = /e/;
document.getElementById("demo").innerHTML = pattern.test(text);
</script>

</body>
</html>

Você não precisa colocar a expressão regular em uma variável primeiro. Os dois as linhas acima podem ser reduzidas para uma:

/e/.test("The best things in life are free!");

Usando exec()

O método exec() é um método de expressão RegExp.

Ele procura uma string por um padrão especificado e retorna o texto encontrado como um objeto.

Se nenhuma correspondência for encontrada, ele retornará um objeto (null) vazio.

O exemplo a seguir pesquisa uma string pelo caractere "e":

Exemplo

/e/.exec("The best things in life are free!");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p id="demo"></p>

<script>
const obj = /e/.exec("The best things in life are free!");
document.getElementById("demo").innerHTML =
"Found " + obj[0] + " in position " + obj.index + " in the text: " + obj.input;
</script>

</body>
</html>

Referência completa do RegExp

Para uma referência completa, acesse nosso Completo Referência JavaScript RegExp.

A referência contém descrições e exemplos de todos os RegExp propriedades e métodos.