{"id":16987,"date":"2022-08-22T13:20:44","date_gmt":"2022-08-22T13:20:44","guid":{"rendered":"https:\/\/soloweb.com.br\/blog\/?p=16987"},"modified":"2023-07-30T13:30:39","modified_gmt":"2023-07-30T13:30:39","slug":"aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos","status":"publish","type":"post","link":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/","title":{"rendered":"Aprenda Express\u00f5es Regulares ou Regex em JavaScript com exemplos"},"content":{"rendered":"\n<p>Na dica de hoje vamos mostrar o que \u00e9 Express\u00f5es Regulares, padr\u00f5es e como testar com exemplos em JavaScript.<\/p>\n\n\n\n<p>Em ci\u00eancia da computa\u00e7\u00e3o, uma express\u00e3o regular ou &#8220;Regex&#8221; (ou os estrangeirismos regex ou regexp , abrevia\u00e7\u00e3o do ingl\u00eas regular expression) prov\u00ea uma forma concisa e flex\u00edvel de identificar cadeias de caracteres de interesse, como caracteres particulares, palavras ou padr\u00f5es de caracteres. Express\u00f5es regulares s\u00e3o escritas numa linguagem formal que pode ser interpretada por um processador de express\u00e3o regular, um programa que serve um gerador de analisador sint\u00e1tico ou examina o texto e identifica as partes que casam com a especifica\u00e7\u00e3o dada. O termo deriva do trabalho do matem\u00e1tico norte-americano Stephen Cole Kleene, que desenvolveu as express\u00f5es regulares como uma nota\u00e7\u00e3o ao que ele chamava de \u00e1lgebra de conjuntos regulares. Seu trabalho serviu de base para os primeiros algoritmos computacionais de busca, e depois para algumas das mais antigas ferramentas de tratamento de texto da plataforma Unix. (<em>wikipedia<\/em>).<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Aprenda Express\u00f5es Regulares ou Regex em JavaScript com exemplos\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/xSPZuAb3OIU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>O que s\u00e3o express\u00f5es regulares?<br><\/strong>Express\u00f5es regulares s\u00e3o padr\u00f5es que permitem descrever, corresponder ou analisar texto. Com express\u00f5es regulares, voc\u00ea pode fazer coisas como localizar e substituir texto, verificar se os dados de entrada seguem o formato necess\u00e1rio e outras coisas semelhantes.<\/p>\n\n\n\n<p><strong>Como criar uma express\u00e3o regular.<br><\/strong>Em JavaScript, voc\u00ea pode criar uma express\u00e3o regular de duas maneiras:<\/p>\n\n\n\n<p><strong>M\u00e9todo #1: usando um literal de express\u00e3o regular. Isso consiste em um padr\u00e3o entre barras. Voc\u00ea pode escrever isso com ou sem um sinalizador (veremos o que sinalizador significa em breve). A sintaxe \u00e9 a seguinte:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let minhaVariavel = \/pattern\/  \t\t\/\/sem flags\n\nlet minhaVariavel = \/pattern\/flags;\t\/\/com flags<\/code><\/pre>\n\n\n\n<p>As barras <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\/\u2026\/<\/mark><\/strong> indicam que estamos criando um padr\u00e3o de express\u00e3o regular, da mesma forma que voc\u00ea usa aspas \u201c \u201d para criar uma string.<\/p>\n\n\n\n<p><strong>M\u00e9todo #2: usando a fun\u00e7\u00e3o construtora RegExp. A sintaxe \u00e9 a seguinte:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let regConstructor = new RegExp(pattern &#91;, flags])<\/code><\/pre>\n\n\n\n<p>Aqui, o padr\u00e3o \u00e9 colocado entre aspas, o mesmo que o par\u00e2metro flag, que \u00e9 opcional.<\/p>\n\n\n\n<p><strong>Ent\u00e3o, quando voc\u00ea usa cada um desses padr\u00f5es?<\/strong><\/p>\n\n\n\n<p>Voc\u00ea deve usar um literal regex quando souber o padr\u00e3o de express\u00e3o regular no momento de escrever o c\u00f3digo.<\/p>\n\n\n\n<p>Por outro lado, use o construtor Regex se o padr\u00e3o regex deve ser criado dinamicamente. Al\u00e9m disso, o construtor regex permite escrever um padr\u00e3o usando um literal de modelo, mas isso n\u00e3o \u00e9 poss\u00edvel com a sintaxe do literal regex.<\/p>\n\n\n\n<p><strong>O que s\u00e3o sinalizadores de express\u00e3o regular?<br><\/strong>Sinalizadores ou modificadores s\u00e3o caracteres que permitem recursos avan\u00e7ados de pesquisa, incluindo pesquisa global e sem distin\u00e7\u00e3o entre mai\u00fasculas e min\u00fasculas. Voc\u00ea pode us\u00e1-los individualmente ou coletivamente. Alguns comumente usados \u200b\u200bs\u00e3o:<\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">g<\/mark><\/strong> &#8211; \u00e9 usado para pesquisa global, o que significa que a pesquisa n\u00e3o retornar\u00e1 ap\u00f3s a primeira correspond\u00eancia.<br><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">i<\/mark><\/strong> &#8211; \u00e9 usado para pesquisa que n\u00e3o diferencia mai\u00fasculas de min\u00fasculas, o que significa que uma correspond\u00eancia pode ocorrer independentemente do uso de mai\u00fasculas e min\u00fasculas.<br><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">m<\/mark><\/strong> &#8211; \u00e9 usado para pesquisa de v\u00e1rias linhas.<br><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">u<\/mark><\/strong>  &#8211; \u00e9 usado para pesquisa Unicode.<br>Vejamos alguns padr\u00f5es de express\u00e3o regular usando ambas as sintaxes.<\/p>\n\n\n\n<p><strong>Como usar um literal de express\u00e3o regular:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/syntax =&gt; \/pattern\/flags\n\nlet regExpStr = \"Ol\u00e1 mundo! ol\u00e1 aqui\";\n\nlet regExpLiteral = \/Ol\u00e1\/gi\n\nconsole.log(regExpStr.match(regExpLiteral))\n\n\/\/sa\u00edda =&gt; &#91;'Ol\u00e1', 'ol\u00e1']<\/code><\/pre>\n\n\n\n<p>Observe que se n\u00e3o sinalizarmos o padr\u00e3o com <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">i<\/mark><\/strong>, somente <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Ol\u00e1<\/mark><\/strong> ser\u00e1 retornado.<\/p>\n\n\n\n<p>O padr\u00e3o <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\/Ol\u00e1\/<\/mark><\/strong> \u00e9 um exemplo de um padr\u00e3o simples. Um padr\u00e3o simples consiste em caracteres que devem aparecer literalmente no texto de destino. Para que ocorra uma correspond\u00eancia, o texto de destino deve seguir a mesma sequ\u00eancia do padr\u00e3o.<\/p>\n\n\n\n<p>Por exemplo, se voc\u00ea reescrever o texto no exemplo anterior e tentar combin\u00e1-lo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let regExpLiteral = \/Hello\/gi\n\nlet regExpStr = \"oHell world, ohell there!\"\n\nconsole.log(regExpStr.match(regExpLiteral));\n\n\/\/sa\u00edda =&gt; null<\/code><\/pre>\n\n\n\n<p>Obtemos <strong>null<\/strong> porque os caracteres na string n\u00e3o aparecem conforme especificado no padr\u00e3o. Ent\u00e3o, um padr\u00e3o literal como <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\/hello\/<\/mark><\/strong>, significa, <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">h<\/mark><\/strong> seguido por <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">e<\/mark><\/strong>, seguido por <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">l<\/mark><\/strong>, seguido por <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">l<\/mark><\/strong>, seguido por <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">o<\/mark><\/strong> , exatamente assim.<\/p>\n\n\n\n<p><strong>Como usar um construtor regex:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/syntax=&gt; RegExp(pattern &#91;,flags]) \n\nlet regExpConst = new RegExp(\"xyz\", 'g');  \/\/com flag -g\n\nlet str = 'xyz xyz';\n\nconsole.log(str.match(regExpConst));\t\t\n\n\/\/sa\u00edda: &#91;'xyz', 'xyz'] <\/code><\/pre>\n\n\n\n<p>Aqui, o padr\u00e3o<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&nbsp;<code><strong>xyz<\/strong><\/code><\/mark><code> <\/code>\u00e9 passado como uma string igual ao sinalizador.&nbsp;Al\u00e9m disso, ambas as ocorr\u00eancias de&nbsp;<code><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">xyz<\/mark><\/strong><\/code> foram correspondidas porque passamos o sinalizador <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">-g<\/mark><\/strong>.&nbsp;Sem ele, apenas a primeira correspond\u00eancia ser\u00e1 retornada.<\/p>\n\n\n\n<p>Tamb\u00e9m podemos passar padr\u00f5es criados dinamicamente como literais de modelo usando a fun\u00e7\u00e3o construtora.&nbsp;Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let pattern = prompt('Informe o padr\u00e3o?')  \n\/\/supondo que informou 'xyz'\n\nlet regExpConst = new RegExp(`${pattern}`, 'gi') \n\nlet str = 'xyz XYZ';\n\nconsole.log(str.match(regExpConst))\n\n\/\/sa\u00edda: &#91;'xyz', 'XYZ']<\/code><\/pre>\n\n\n\n<p><strong>Como usar caracteres especiais de express\u00e3o regular<\/strong>.<br>Um caractere especial em uma express\u00e3o regular \u00e9 um caractere com significado reservado. Usando caracteres especiais, voc\u00ea pode fazer mais do que apenas encontrar uma correspond\u00eancia direta.<\/p>\n\n\n\n<p>Por exemplo, se voc\u00ea deseja corresponder um caractere em uma string que pode ou n\u00e3o aparecer uma ou v\u00e1rias vezes, voc\u00ea pode fazer isso com caracteres especiais. Esses caracteres se encaixam em diferentes subgrupos que executam fun\u00e7\u00f5es semelhantes.<\/p>\n\n\n\n<p>Vamos dar uma olhada em cada subgrupo e os personagens que os acompanham.<\/p>\n\n\n\n<p><strong>\u00c2ncoras e Limites ou Anchors e Boundaries::<br><\/strong>\u00c2ncoras s\u00e3o metacaracteres que correspondem ao in\u00edcio e ao fim de uma linha de texto que est\u00e3o examinando. Voc\u00ea os usa para afirmar onde um limite deve estar.<\/p>\n\n\n\n<p>Os dois caracteres usados \u200b\u200bs\u00e3o <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">^<\/mark><\/strong> e <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">$<\/mark><\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">^<\/mark><\/strong> corresponde ao in\u00edcio de uma linha e ancora um literal no in\u00edcio dessa linha. Por exemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let  regexPattern = \/^cat\/;\n\nconsole.log(regexPattern.test('cat and mouse'));   \t\t\n\/\/sa\u00edda=&gt; true\n\nconsole.log(regexPattern.test('The cat and mouse'))\n\n\/\/ sa\u00edda =&gt; false  - porque a linha n\u00e3o come\u00e7a com cat\n\n\/\/ sem o  ^  no padr\u00e3o, a sa\u00edda retornar\u00e1 true porque n\u00e3o declaramos um limite\/boundary.\n\nlet regexPattern = \/cat\/;\nconsole.log(regexPattern.test(The cat and mouse));\t\t\n\/\/sa\u00edda =&gt; true<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">$<\/mark><\/strong><\/code> corresponde ao final de uma linha e ancora um literal no final dessa linha.&nbsp;Por exemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let regexPattern = \/cat$\/;\n\nconsole.log(regexPattern.test('The mouse and the cat'));\n\/\/ sa\u00edda =&gt; true\n\nconsole.log(regexPattern.test('The cat and mouse'));\n\/\/ sa\u00edda =&gt; false<\/code><\/pre>\n\n\n\n<p>Observe que ancora os caracteres <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">^<\/mark><\/strong> e <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">$<\/mark><\/strong> corresponde apenas \u00e0 posi\u00e7\u00e3o dos caracteres no padr\u00e3o e n\u00e3o aos pr\u00f3prios caracteres reais.<\/p>\n\n\n\n<p>Limites de palavras s\u00e3o metacaracteres que correspondem \u00e0 posi\u00e7\u00e3o inicial e final de uma palavra <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\u2013<\/mark><\/strong> uma sequ\u00eancia de caracteres alfanum\u00e9ricos. Voc\u00ea pode pensar neles como uma vers\u00e3o baseada em palavras de <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">^<\/mark><\/strong> e <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">$<\/mark><\/strong>. Voc\u00ea usa os metacaracteres <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">b<\/mark><\/strong> e <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">B<\/mark><\/strong> para afirmar um limite de palavra.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\b<\/mark><\/strong> corresponde ao in\u00edcio ou fim de uma palavra. A palavra \u00e9 combinada de acordo com a posi\u00e7\u00e3o do metacaractere. Aqui est\u00e1 um exemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/syntax 1: \/\\b...\/ onde ... representa uma palavra.\n\n\/\/procura por uma palavra que comece com o padr\u00e3o informado\nlet regexPattern = \/\\bward\/gi;\n\nlet text = \u201cbackward Wardrobe Ward\u201d;\n\nconsole.log(text.match(regexPattern));\t\t\n\/\/ sa\u00eddat: &#91;'Ward', 'Ward']\n\n\/\/syntax 2: \/...\\b\/\n\n\/\/procura por uma palavra que termine com o padr\u00e3o 'ward'\nlet regexPattern = \/ward\\b\/gi;\n\nlet text = \u201cbackward Wardrobe Ward\u201d;\t\t\n\nconsole.log(text.match(regexPattern));\t\t\n\/\/ sa\u00edda: &#91;'ward', 'Ward']\n\n\/\/syntax 3: \/\\b....\\b\/\n\n\/\/procura por uma palavra independente que come\u00e7a e termina com o padr\u00e3o informado\nlet regexPattern = \/ward\\b\/gi;\n\nlet text = \u201cbackward Wardrobe Ward\u201d;\n\nconsole.log(text.match(regexPattern));\t\n\/\/sa\u00edda: &#91;'ward']<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\B<\/mark><\/strong> \u00e9 oposto de <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\b<\/mark><\/strong>. Ele corresponde a todas as posi\u00e7\u00f5es <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\b<\/mark><\/strong> n\u00e3o.<\/li>\n<\/ul>\n\n\n\n<p><strong>Shortcodes para outros metacaracteres:<br><\/strong>Al\u00e9m dos metacaracteres que vimos, aqui est\u00e3o alguns dos mais usados:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\d<\/mark><\/strong> \u2013 corresponde a qualquer d\u00edgito decimal e \u00e9 um atalho para <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[0-9]<\/mark><\/strong>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\w<\/mark><\/strong> \u2013 corresponde a qualquer caractere alfanum\u00e9rico que pode ser uma letra, um d\u00edgito ou um sublinhado. <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\w<\/mark><\/strong> \u00e9 abrevia\u00e7\u00e3o de <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[A-Za-z0-9_]<\/mark><\/strong>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\s<\/mark><\/strong> \u2013 corresponde a qualquer caractere de espa\u00e7o em branco.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\D<\/mark><\/strong> \u2013 corresponde a qualquer n\u00e3o d\u00edgito e \u00e9 o mesmo que <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[^0-9.]<\/mark><\/strong>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\W<\/mark><\/strong> \u2013 corresponde a qualquer caractere que n\u00e3o seja de palavra (que n\u00e3o seja alfanum\u00e9rico) e \u00e9 uma abrevia\u00e7\u00e3o de <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[^A-Za-z0-9_]<\/mark><\/strong>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\S<\/mark><\/strong> \u2013 corresponde a um caractere de espa\u00e7o n\u00e3o branco.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.<\/mark><\/strong> \u2013 corresponde a qualquer caractere.<\/li>\n<\/ul>\n\n\n\n<p><strong>O que \u00e9 uma Classe ou Class de Caracter?<\/strong><br>Uma classe de caracteres \u00e9 usada para corresponder a qualquer um dos v\u00e1rios caracteres em uma posi\u00e7\u00e3o espec\u00edfica. Para denotar uma classe de caracteres, voc\u00ea usa colchetes [] e, em seguida, lista os caracteres que deseja corresponder dentro dos colchetes.<\/p>\n\n\n\n<p>Vejamos um exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/encontra e combina uma palavra com duas grafias alternativas\nlet regexPattern = \/ambi&#91;ea]nce\/\n\nconsole.log(regexPattern.test(ambience))   \t\n\/\/sa\u00edda:true\n\nconsole.log(regex.test(ambiance))\t\t\n\/\/sa\u00edda:true\n\n\/\/O padr\u00e3o regex interpreta como: encontre a seguido por m, depois b,\n\/\/ent\u00e3o i, ent\u00e3o e ou a, ent\u00e3o n, ent\u00e3o c, e ent\u00e3o e.\n<\/code><\/pre>\n\n\n\n<p><strong>O que \u00e9 uma classe de personagem negada?<br><\/strong>Se voc\u00ea adicionar um s\u00edmbolo de acento circunflexo dentro de uma classe de caractere como esta <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[^\u2026]<\/mark><\/strong> , ele corresponder\u00e1 a qualquer caractere que n\u00e3o esteja listado entre colchetes. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let regexPattern = \/&#91;^bc]at\/\n\nconsole.log(regexPattern.test(bat))      \n\/\/sa\u00edda:false\n\nconsole.log(regexPattern.test(cat))\t\n\/\/sa\u00edda:false\n\nconsole.log(regexPattern.test(mat))\t\n\/\/sa\u00edda:true<\/code><\/pre>\n\n\n\n<p><strong>O que \u00e9 um intervalo?<br><\/strong>Um h\u00edfen <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&#8211;<\/mark><\/strong> indica intervalo quando usado dentro de uma classe de caracteres. Suponha que voc\u00ea queira combinar um conjunto de n\u00fameros, digamos <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[0123456789]<\/mark><\/strong>, ou um conjunto de caracteres, digamos <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[abcdefg]<\/mark><\/strong>. Voc\u00ea pode escrev\u00ea-lo como um intervalo como este, <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[0-9]<\/mark> <\/strong>e <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[ag]<\/mark><\/strong>, respectivamente.<\/p>\n\n\n\n<p><strong>O que \u00e9 Altern\u00e2ncia?<br><\/strong>A altern\u00e2ncia \u00e9 outra maneira de especificar um conjunto de op\u00e7\u00f5es. Aqui, voc\u00ea usa o caractere pipe <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">|<\/mark><\/strong> para corresponder a qualquer uma das v\u00e1rias subexpress\u00f5es. Qualquer uma das subexpress\u00f5es \u00e9 chamada de alternativa.<\/p>\n\n\n\n<p>O s\u00edmbolo de pipe significa &#8216;ou&#8217;, portanto, corresponde a uma s\u00e9rie de op\u00e7\u00f5es. Permite combinar subexpress\u00f5es como alternativas.<\/p>\n\n\n\n<p>Por exemplo, <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">(x|y|z)a<\/mark><\/strong> corresponder\u00e1 a <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">xa ou ya, ou<\/mark> <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">za<\/mark><\/strong>. Para limitar o alcance da altern\u00e2ncia, voc\u00ea pode usar par\u00eanteses para agrupar as alternativas.<\/p>\n\n\n\n<p>Sem os par\u00eanteses, <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">x|y|za<\/mark><\/strong> significaria <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">x ou y ou za<\/mark><\/strong>. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let regexPattern = \/(Bob|George)Clan\/ig\n\nconsole.log(regexPattern.test('Bob Clan'));\t\n\/\/sa\u00edda: true\n\nconsole.log(regexPattern.test('George Clan'));\t\n\/\/sa\u00edda: true<\/code><\/pre>\n\n\n\n<p><strong>O que s\u00e3o quantificadores e gan\u00e2ncia?<br><\/strong>Os quantificadores indicam quantas vezes um caractere, uma classe de caracteres ou um grupo deve aparecer no texto de destino para que ocorra uma correspond\u00eancia. Aqui est\u00e3o algumas peculiares:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">+<\/mark><\/strong> corresponder\u00e1 a qualquer caractere ao qual esteja anexado se o caractere aparecer pelo menos uma vez. Por exemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let regexPattern = \/hel+o\/\n\nconsole.log(regexPattern.test('helo'))\t\t\n\/\/sa\u00edda:true\n\nconsole.log(regexPattern.test('hellllllllllo'))\t\n\/\/sa\u00edda:true\n\nconsole.log(regexPattern.test('heo'))\t\t\n\/\/sa\u00edda:false<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">*<\/mark><\/strong> \u00e9 semelhante ao caractere <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">+<\/mark><\/strong>, mas com uma pequena diferen\u00e7a. Quando voc\u00ea anexa <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">*<\/mark><\/strong> a um caractere, significa que deseja corresponder a qualquer n\u00famero desse caractere, incluindo nenhum. Aqui est\u00e1 um exemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let regexPattern = \/hel*o\/\n\nconsole.log(regexPattern.test(\u2018helo\u2019))\t\t\n\/\/sa\u00edda:true\n\nconsole.log(regexPattern.test(\u2018hellllo\u2019))\t\n\/\/sa\u00edda: true\n\nconsole.log(regexPattern.test(\u2018heo\u2019))\t\t\n\/\/sa\u00edda:true\n\n\/\/ aqui o * corresponde a 0 ou qualquer n\u00famero de 'l'<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">?<\/mark><\/strong> <\/code>implica &#8216;opcional&#8217;.&nbsp;Quando voc\u00ea o anexa a um caractere, significa que o caractere pode ou n\u00e3o aparecer.&nbsp;Por exemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let regexPattern = \/colou?r\/\n\nconsole.log(regexPattern.test(\u2018color\u2019))\t\t\n\/\/sa\u00edda:true\n\nconsole.log(regexPattern.test(\u2018colour\u2019))\t\n\/\/sa\u00edda:true\n\n\/\/a ? depois do caractere u torna voc\u00ea opcional<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">{N}<\/mark><\/strong>, quando anexado a um caractere ou classe de caractere, especifica quantos caracteres desejamos. Por exemplo <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\/\\d{3}\/<\/mark><\/strong>, significa combinar tr\u00eas d\u00edgitos consecutivos.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">{N,M}<\/mark><\/strong> \u00e9 chamado de quantificador de intervalo e \u00e9 usado para especificar um intervalo para a correspond\u00eancia m\u00ednima e m\u00e1xima poss\u00edvel. Por exemplo <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\/\\d{3, 6}\/<\/mark><\/strong>, significa corresponder um m\u00ednimo de 3 e um m\u00e1ximo de 6 d\u00edgitos consecutivos.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">{N, }<\/mark><\/strong> denota um intervalo aberto. Por exemplo <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\/\\d{3, }\/<\/mark><\/strong>, significa corresponder a 3 ou mais d\u00edgitos consecutivos.<\/li>\n<\/ul>\n\n\n\n<p><strong>O que \u00e9 gan\u00e2ncia em Regex?<\/strong><br>Todos os quantificadores por padr\u00e3o s\u00e3o gananciosos . Isso significa que eles tentar\u00e3o corresponder a todos os caracteres poss\u00edveis.<\/p>\n\n\n\n<p>Para remover este estado padr\u00e3o e torn\u00e1-los n\u00e3o-gananciosos, voc\u00ea anexa um <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">?<\/mark><\/strong> ao operador como este <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">+?, *?, {N}?, {N,M}?\u2026..<\/mark><\/strong> e assim por diante.<\/p>\n\n\n\n<p><strong>O que s\u00e3o Agrupamento e Retro-refer\u00eancia?<br><\/strong>Anteriormente, vimos como podemos limitar o escopo da altern\u00e2ncia usando os par\u00eanteses.<\/p>\n\n\n\n<p>E se voc\u00ea quiser usar um quantificador como <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">+<\/mark><\/strong> ou <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">*<\/mark><\/strong> em mais de um caractere por vez <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&#8211;<\/mark><\/strong> digamos, uma classe ou grupo de caracteres? Voc\u00ea pode agrup\u00e1-los como um todo usando os par\u00eanteses antes de anexar o quantificador, assim como neste exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let regExp = \/abc+(xyz+)+\/i\n\nconsole.log(regExp.test('abcxyzzzzXYZ'))       \n\/\/sa\u00edda=&gt;true<\/code><\/pre>\n\n\n\n<p>Aqui est\u00e1 o que o padr\u00e3o significa: o primeiro <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">+<\/mark><\/strong> corresponde ao c de abc, o segundo <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">+<\/mark><\/strong> corresponde ao <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">z<\/mark><\/strong> de <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">xyz<\/mark><\/strong> e o terceiro <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">+<\/mark><\/strong> corresponde \u00e0 subexpress\u00e3o <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">xyz<\/mark><\/strong>, que corresponder\u00e1 se a sequ\u00eancia se repetir.<\/p>\n\n\n\n<p><strong>A refer\u00eancia inversa<\/strong> permite que voc\u00ea corresponda a um novo padr\u00e3o que \u00e9 igual a um padr\u00e3o correspondido anteriormente em uma express\u00e3o regular. Voc\u00ea tamb\u00e9m usa par\u00eanteses para refer\u00eancia inversa porque ele pode lembrar uma subexpress\u00e3o previamente correspondida que ela inclui (ou seja, o grupo capturado).<\/p>\n\n\n\n<p>No entanto, \u00e9 poss\u00edvel ter mais de um grupo capturado em uma express\u00e3o regular. Portanto, para fazer refer\u00eancia a qualquer grupo capturado, voc\u00ea usa um n\u00famero para identificar os par\u00eanteses.<\/p>\n\n\n\n<p>Suponha que voc\u00ea tenha 3 grupos capturados em uma regex e queira fazer refer\u00eancia a qualquer um deles. Voc\u00ea usa <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\1, \\2 ou \\3<\/mark><\/strong>, para se referir ao primeiro, segundo ou terceiro par\u00eanteses. Para numerar os par\u00eanteses, comece a contar os par\u00eanteses abertos da esquerda.<\/p>\n\n\n\n<p>Vejamos alguns exemplos:<\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">(x)<\/mark><\/strong> corresponde a x e lembra a partida.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let regExp = \/(abc)bar\\1\/ig;\n\n\/\/abc is backreferenced and is anchored at the same position as \\1\nconsole.log(regExp.test('abcbarAbc'))\t\t\n\/\/sa\u00edda:true\n\nconsole.log(regExp.test('abcbar'))\t\t\n\/\/sa\u00edda:false<\/code><\/pre>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">(?:x)<\/mark><\/strong> corresponde a x, mas n\u00e3o recupera a correspond\u00eancia. Al\u00e9m disso, <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\n <\/mark><\/strong>(onde n \u00e9 um n\u00famero) n\u00e3o se lembra de um grupo capturado anteriormente e corresponder\u00e1 como um literal. Usando um exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let regExp = \/(?:abc)bar\\1\/ig\n\nconsole.log(regExp.test('abcbarabc'))\t\t\n\/\/sa\u00edda:false\n\nconsole.log(regExp.test('abcbar\\1'))\t\t\n\/\/sa\u00edda:true<\/code><\/pre>\n\n\n\n<p><strong>A Regra de Fuga ou Escape Rule.<br><\/strong>Um metacaractere deve ser escapado com uma barra invertida se voc\u00ea quiser que ele apare\u00e7a como um literal em sua express\u00e3o regular. Ao escapar de um metacaractere em regex, o metacaractere perde seu significado especial.<\/p>\n\n\n\n<p><strong>M\u00e9todos de Express\u00e3o Regular.<br><\/strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-black-color\"><strong>O m\u00e9todo<\/strong> <strong>test()<\/strong>.<br><\/mark>Usamos esse m\u00e9todo v\u00e1rias vezes neste artigo. O m\u00e9todo <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">test()<\/mark><\/strong> compara o texto de destino com o padr\u00e3o regex e retorna um valor booleano de acordo. Se houver uma correspond\u00eancia, ele retornar\u00e1 <strong>true<\/strong>, caso contr\u00e1rio, retornar\u00e1 false.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let regExp = \/abc\/ig\n\nconsole.log(regExp.test('abcdef'))\t\t\n\/\/sa\u00edda:true\n\nconsole.log(regExp.test('bcadef'))\t\t\n\/\/sa\u00edda:false<\/code><\/pre>\n\n\n\n<p><strong>O m\u00e9todo exec()<\/strong>.<br>O m\u00e9todo <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">exec()<\/mark><\/strong> compara o texto de destino com o padr\u00e3o regex. Se houver uma correspond\u00eancia, ele retornar\u00e1 uma matriz com a correspond\u00eancia <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\u2013<\/mark><\/strong> caso contr\u00e1rio, retornar\u00e1 nulo. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let regExp = \/abc\/ig\n\nconsole.log(regExp.exec('abcdef'))\t\n\/\/sa\u00edda:&#91;\"abc\"]\n\nconsole.log(regExp.exec('bcadef'))\n\/\/sa\u00edda:null<\/code><\/pre>\n\n\n\n<p>Al\u00e9m disso, existem m\u00e9todos de string que aceitam express\u00f5es regulares como um par\u00e2metro como <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">match(), replace(), replaceAll(), matchAll(), search()e split().<\/mark><\/strong><\/p>\n\n\n\n<p><strong>Exemplos de regex.<br><\/strong>Aqui est\u00e3o alguns exemplos para refor\u00e7ar alguns dos conceitos que aprendemos neste artigo.<\/p>\n\n\n\n<p>Primeiro exemplo: como usar um padr\u00e3o regex para corresponder a um endere\u00e7o de e-mail:<\/p>\n\n\n\n<p>Vamos interpretar o padr\u00e3o. Aqui est\u00e1 o que est\u00e1 acontecendo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\/<\/mark><\/strong> representa o in\u00edcio do padr\u00e3o de express\u00e3o regular.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">^<\/mark><\/strong> verifica o in\u00edcio de uma linha com os caracteres na classe de caracteres.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[(\\w\\d\\W)+ ]+<\/mark><\/strong> corresponde a qualquer palavra, d\u00edgito e caractere n\u00e3o-palavra na classe de caracteres pelo menos uma vez. Observe como os par\u00eanteses foram usados \u200b\u200bpara agrupar os caracteres antes de adicionar o quantificador. Isto \u00e9 igual a isto [\\w+\\d+\\W+]+.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">@<\/mark><\/strong> corresponde ao literal @ no formato de email.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[\\w+]+<\/mark><\/strong> corresponde a qualquer caractere de palavra nesta classe de caracteres pelo menos uma vez.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.<\/mark><\/strong> escapa do ponto para que apare\u00e7a como um caractere literal.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[\\w+]+$<\/mark><\/strong> corresponde a qualquer caractere de palavra nesta classe. Al\u00e9m disso, essa classe de caractere est\u00e1 ancorada no final da linha.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\/-<\/mark><\/strong> termina o padr\u00e3o.<\/li>\n<\/ul>\n\n\n\n<p>Certo, pr\u00f3ximo exemplo: como fazer a correspond\u00eancia de um URL com o formato http:\/\/example.com ou https:\/\/www.example.com:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let pattern = \/^&#91;https?]+:\\\/\\\/((w{3}.)?&#91;\\w+]+)\\.&#91;\\w+]+$\/gi\n\nconsole.log(pattern.test('https:\/\/www.example.com')\n\/\/sa\u00edda: true\n                        \nconsole.log(pattern.test('http:\/\/example.com')\n\/\/sa\u00edda: true\n                         \nconsole.log(pattern.test('https:\/\/example')\n\/\/sa\u00edda:false<\/code><\/pre>\n\n\n\n<p>Vamos tamb\u00e9m interpretar esse padr\u00e3o. Aqui est\u00e1 o que est\u00e1 acontecendo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\/\u2026..\/<\/mark><\/strong> representa o in\u00edcio e o fim do padr\u00e3o regex.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">^<\/mark><\/strong> afirma para o in\u00edcio da linha.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[https?]+<\/mark><\/strong> corresponde aos caracteres listados pelo menos uma vez, mas <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">?<\/mark><\/strong> torna o <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&#8216;s&#8217;<\/mark><\/strong> opcional.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">:<\/mark><\/strong> corresponde a um ponto e v\u00edrgula literal. <\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\\\/\\\/<\/mark><\/strong> escapa das duas barras.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">(w{3}.)?<\/mark><\/strong> corresponde ao caractere w 3 vezes e ao ponto que segue imediatamente. No entanto, este grupo \u00e9 opcional.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[\\w+]+<\/mark><\/strong> corresponde ao caractere nesta classe pelo menos uma vez.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.<\/mark><\/strong> escapa do ponto.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">[\\w+]+$<\/mark><\/strong> corresponde a qualquer caractere de palavra nesta classe. Al\u00e9m disso, essa classe de caractere est\u00e1 ancorada no final da linha.<\/li>\n<\/ul>\n\n\n\n<p>Esperamos ter ajudado com o artigo, que analisamos os fundamentos das express\u00f5es regulares. Tamb\u00e9m explicamos alguns padr\u00f5es de express\u00e3o regular e praticamos com alguns exemplos.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Na dica de hoje vamos mostrar o que \u00e9 Express\u00f5es Regulares, padr\u00f5es e como testar com exemplos em JavaScript. Em<\/p>\n","protected":false},"author":4,"featured_media":16995,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[114,25,240],"tags":[286,289,224,288,287],"class_list":["post-16987","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas","category-geral","category-javascript","tag-espressao","tag-exemplos","tag-javascript","tag-regex","tag-regular"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Aprenda Express\u00f5es Regulares ou Regex em JavaScript com exemplos - SOLOWEB Tecnologia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aprenda Express\u00f5es Regulares ou Regex em JavaScript com exemplos - SOLOWEB Tecnologia\" \/>\n<meta property=\"og:description\" content=\"Na dica de hoje vamos mostrar o que \u00e9 Express\u00f5es Regulares, padr\u00f5es e como testar com exemplos em JavaScript. Em\" \/>\n<meta property=\"og:url\" content=\"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/\" \/>\n<meta property=\"og:site_name\" content=\"SOLOWEB Tecnologia\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-22T13:20:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-30T13:30:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/blog.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"940\" \/>\n\t<meta property=\"og:image:height\" content=\"787\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlos Rolim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlos Rolim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/22\\\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/22\\\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\\\/\"},\"author\":{\"name\":\"Carlos Rolim\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/b10ff5bc260b411c2d82b19fad8ae3f1\"},\"headline\":\"Aprenda Express\u00f5es Regulares ou Regex em JavaScript com exemplos\",\"datePublished\":\"2022-08-22T13:20:44+00:00\",\"dateModified\":\"2023-07-30T13:30:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/22\\\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\\\/\"},\"wordCount\":2397,\"publisher\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/22\\\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/blog.jpeg\",\"keywords\":[\"espress\u00e3o\",\"exemplos\",\"javascript\",\"regex\",\"regular\"],\"articleSection\":[\"Dicas\",\"Geral\",\"JavaScript\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/22\\\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\\\/\",\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/22\\\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\\\/\",\"name\":\"Aprenda Express\u00f5es Regulares ou Regex em JavaScript com exemplos - SOLOWEB Tecnologia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/22\\\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/22\\\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/blog.jpeg\",\"datePublished\":\"2022-08-22T13:20:44+00:00\",\"dateModified\":\"2023-07-30T13:30:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/22\\\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/22\\\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/22\\\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\\\/#primaryimage\",\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/blog.jpeg\",\"contentUrl\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/blog.jpeg\",\"width\":940,\"height\":787},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/22\\\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Aprenda Express\u00f5es Regulares ou Regex em JavaScript com exemplos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/\",\"name\":\"SOLOWEB Tecnologia\",\"description\":\"SOLOWEB Tecnologia\",\"publisher\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#organization\",\"name\":\"SOLOWEB Tecnologia\",\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/cropped-solo.png\",\"contentUrl\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/cropped-solo.png\",\"width\":341,\"height\":94,\"caption\":\"SOLOWEB Tecnologia\"},\"image\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/b10ff5bc260b411c2d82b19fad8ae3f1\",\"name\":\"Carlos Rolim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/avatar_user_4_1674993909-96x96.png\",\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/avatar_user_4_1674993909-96x96.png\",\"contentUrl\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/avatar_user_4_1674993909-96x96.png\",\"caption\":\"Carlos Rolim\"},\"sameAs\":[\"http:\\\/\\\/carlosrolim.com\"],\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/author\\\/carlos\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Aprenda Express\u00f5es Regulares ou Regex em JavaScript com exemplos - SOLOWEB Tecnologia","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/","og_locale":"pt_BR","og_type":"article","og_title":"Aprenda Express\u00f5es Regulares ou Regex em JavaScript com exemplos - SOLOWEB Tecnologia","og_description":"Na dica de hoje vamos mostrar o que \u00e9 Express\u00f5es Regulares, padr\u00f5es e como testar com exemplos em JavaScript. Em","og_url":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/","og_site_name":"SOLOWEB Tecnologia","article_published_time":"2022-08-22T13:20:44+00:00","article_modified_time":"2023-07-30T13:30:39+00:00","og_image":[{"width":940,"height":787,"url":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/blog.jpeg","type":"image\/jpeg"}],"author":"Carlos Rolim","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Carlos Rolim","Est. tempo de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/#article","isPartOf":{"@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/"},"author":{"name":"Carlos Rolim","@id":"https:\/\/soloweb.com.br\/blog\/#\/schema\/person\/b10ff5bc260b411c2d82b19fad8ae3f1"},"headline":"Aprenda Express\u00f5es Regulares ou Regex em JavaScript com exemplos","datePublished":"2022-08-22T13:20:44+00:00","dateModified":"2023-07-30T13:30:39+00:00","mainEntityOfPage":{"@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/"},"wordCount":2397,"publisher":{"@id":"https:\/\/soloweb.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/#primaryimage"},"thumbnailUrl":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/blog.jpeg","keywords":["espress\u00e3o","exemplos","javascript","regex","regular"],"articleSection":["Dicas","Geral","JavaScript"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/","url":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/","name":"Aprenda Express\u00f5es Regulares ou Regex em JavaScript com exemplos - SOLOWEB Tecnologia","isPartOf":{"@id":"https:\/\/soloweb.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/#primaryimage"},"image":{"@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/#primaryimage"},"thumbnailUrl":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/blog.jpeg","datePublished":"2022-08-22T13:20:44+00:00","dateModified":"2023-07-30T13:30:39+00:00","breadcrumb":{"@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/#primaryimage","url":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/blog.jpeg","contentUrl":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/blog.jpeg","width":940,"height":787},{"@type":"BreadcrumbList","@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/22\/aprenda-expressoes-regulares-ou-regex-em-javascript-com-exemplos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/soloweb.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Aprenda Express\u00f5es Regulares ou Regex em JavaScript com exemplos"}]},{"@type":"WebSite","@id":"https:\/\/soloweb.com.br\/blog\/#website","url":"https:\/\/soloweb.com.br\/blog\/","name":"SOLOWEB Tecnologia","description":"SOLOWEB Tecnologia","publisher":{"@id":"https:\/\/soloweb.com.br\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/soloweb.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/soloweb.com.br\/blog\/#organization","name":"SOLOWEB Tecnologia","url":"https:\/\/soloweb.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/soloweb.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/04\/cropped-solo.png","contentUrl":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/04\/cropped-solo.png","width":341,"height":94,"caption":"SOLOWEB Tecnologia"},"image":{"@id":"https:\/\/soloweb.com.br\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/soloweb.com.br\/blog\/#\/schema\/person\/b10ff5bc260b411c2d82b19fad8ae3f1","name":"Carlos Rolim","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2023\/01\/avatar_user_4_1674993909-96x96.png","url":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2023\/01\/avatar_user_4_1674993909-96x96.png","contentUrl":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2023\/01\/avatar_user_4_1674993909-96x96.png","caption":"Carlos Rolim"},"sameAs":["http:\/\/carlosrolim.com"],"url":"https:\/\/soloweb.com.br\/blog\/author\/carlos\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/16987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=16987"}],"version-history":[{"count":11,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/16987\/revisions"}],"predecessor-version":[{"id":18182,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/16987\/revisions\/18182"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/media\/16995"}],"wp:attachment":[{"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=16987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=16987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=16987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}