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.
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.
/pattern/modifiers;
/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).
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.
search()
com uma StringO método search()
pesquisa uma string por um valor especificado e retorna a posição da correspondência:
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 "W3Schools", 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>
search()
com uma expressão regularUse 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>
replace()
com uma StringO 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 "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","W3Schools");
}
</script>
</body>
</html>
replace()
com uma expressão regularUse 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>
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 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>
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>
Em JavaScript, o objeto RegExp é um objeto de expressão regular com propriedades e métodos predefinidos.
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":
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!");
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":
/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>
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.