Complementando as outras respostas, outra alternativa é:
const url = "https://teste.teste.pt/sites/teste/Normativo/NormasDeProcedimentos/Documents/Histórico/";
const regex = /\/Normativo\/([^\/]+)/;
console.log(regex.exec(url)[1]); // NormasDeProcedimentos
O trecho \/Normativo\/
verifica se existe a palavra "Normativo" entre duas barras.
Em seguida, eu uso [^\/]+
:
[^\/]
: O ^
entre colchetes significa "qualquer caractere que não esteja dentro dos colchetes". No caso, só temos a barra (devidamente escapada com \
para não ser confundida com os delimitadores da regex). Por isso, esta expressão significa "qualquer caractere que não seja /
"
- o quantificador
+
significa: uma ou mais ocorrências.
Todo este trecho está entre parênteses para formar um grupo de captura. E como é o primeiro par de parênteses, isso quer dizer que qualquer trecho será capturado no grupo 1.
Em seguida uso o método exec
, que retorna o match, e pego a posição 1, que corresponde ao primeiro grupo de captura. O resultado será "NormasDeProcedimentos".
Indo um pouco além...
Usar .+?
em vez de [^\/]+
também funciona. Isso só começa a fazer alguma diferença se tivermos uma URL que não satisfaz a expressão.
Por exemplo, não ficou claro se a URL pode ser apenas: https://teste.teste.pt/sites/teste/Normativo/NormasDeProcedimentos
A expressão .*\/Normativo\/(.+?)\/.*
faz com que uma barra seja obrigatória depois de NormasDeProcedimentos
, então para a URL acima ela falharia. Só que .+?
significa "uma ou mais ocorrências de qualquer caractere", sendo que o ?
significa "o mínimo de caracteres que satisfaça a expressão".
Isso quer dizer que a regex vai testar várias possibilidades antes de falhar (já que .
significa "qualquer caractere", ou seja, há uma quantidade enorme de possibilidades a serem testadas).
Fiz um teste desta regex no regex101.com, e se você entrar no modo de debug, verá que a regex vai e volta várias vezes na string, verificando várias possibilidades em várias posições diferentes da mesma. Nesta tela você pode usar o teclado (setas para a direita e esquerda para avançar e voltar, podendo ver o que a regex faz a cada passo). Quando aparecer uma seta vermelha apontando para a esquerda, isso representa um backtracking, ou seja, uma tentativa da regex voltar algumas posições da string e testar novas possibilidades.
Neste mesmo link, repare também do lado esquerdo: lá indica que a regex precisou de mais de 4500 passos até perceber que a string não satisfaz a expressão. Isso é graças ao .+?
, e também por causa do .*
no início e fim da expressão. Como o ponto significa "qualquer caractere", e os quantificadores +
e *
não tem um limite máximo, a regex tenta todas as possibilidades (com 1, 2, 3... n caracteres), até perceber que nenhum match pode ser encontrado.
Por outro lado, vamos ver o que acontece se usarmos \/Normativo\/([^\/]+)\/
(repare que adicionei uma barra ao final, somente para que ela seja obrigatória e a regex falhe para a URL https://teste.teste.pt/sites/teste/Normativo/NormasDeProcedimentos
).
Coloquei-a também no regex101.com, e veja que ela precisa de bem menos passos (cerca de 90) para perceber que não há um match. Isso porque retirei o .*
do início e fim (pois eu só estou interessado no que tem depois de "/Normativo/"), e coloquei explicitamente o que eu quero ([^\/]+
- tudo que não seja o caractere /
).
Essa diferença acontece porque quantificadores preguiçosos (como o .+?
), apesar de muito úteis para casos como esse, têm o seu preço. E usar ponto .
é muito tentador, mas nem sempre é o que você precisa. O ponto significa "qualquer caractere", mas você não quer qualquer caractere, você quer "qualquer caractere que não seja /
", então o melhor é sempre dizer explicitamente o que quer e o que não quer.
É claro que para programas pequenos, em que a regex executará poucas vezes, e principalmente para os casos em que é encontrado um match, a diferença de desempenho será irrelevante. Mas é importante ter esses detalhes em mente, pois há casos em que isso pode fazer diferença.
Além disso, vale lembrar que a quantidade exata de passos depende da engine e das strings de entrada. Mas a diferença entre as expressões permanece mais ou menos a mesma (a versão com [^\/]
sempre será mais rápida que .+?
).
Por que não validar a URL?
Já que a entrada é uma URL, você poderia usar o objeto URL
e obter somente o pathname
:
let url = 'https://teste.teste.pt/sites/teste/Normativo/NormasDeProcedimentos/Documents/Histórico/';
let path = new URL(url).pathname;
console.log(path); // "/sites/teste/Normativo/NormasDeProcedimentos/Documents/Histórico/"
// usar a regex com a string path (em vez de usar a URL inteira)
const regex = /\/Normativo\/([^\/]+)/;
console.log(regex.exec(path)[1]); // NormasDeProcedimentos
Com isso, você valida se a entrada é uma URL válida e ainda obtém uma string menor para a regex avaliar, fazendo com que ela execute um pouco mais rápido. Novamente, para poucas execuções, a diferença será irrelevante, mas pode ser que a validação feita por new URL
valha a pena, pois aí você não aceita simplesmente qualquer string. Fica a seu critério usar ou não.
Na pergunta você disse que quer retornar NormasDeProcedimento/
(com a barra no final). Sendo assim, basta você incluir esta barra na regex (e dentro dos parênteses, para que já fique disponível no grupo de captura).
const url = "https://teste.teste.pt/sites/teste/Normativo/NormasDeProcedimentos/Documents/Histórico/";
const regex = /\/Normativo\/([^\/]+\/)/;
console.log(regex.exec(url)[1]); // NormasDeProcedimentos/
var str = window.location.href;