2

Tenho esta URL:

https://teste.teste.pt/sites/teste/Normativo/NormasDeProcedimentos/Documents/Histórico/

Como eu poderia retornar apenas NormasDeProcedimento/ da URL com JavaScript e guardar numa variável? Sendo que o objetivo seria retirar o que estivesse do Normativo/ para a frente até a próxima /.

5
  • 1
    Você tem que captura a url ou ela é estática?
    – Marconi
    Commented 27/12/2018 às 10:46
  • 1
    Tenho este código para retirar var str = window.location.href;
    – KmDroid
    Commented 27/12/2018 às 10:48
  • Por retirar você quer dizer remover essa parte da string ou retornar apenas ela? Commented 27/12/2018 às 10:51
  • Neste caso seria retirar do "Normativo/" para a frente até a próxima "/" e ficaria neste caso "NormasDeProcedimentos/"
    – KmDroid
    Commented 27/12/2018 às 10:54
  • @fernandosavio Retornar apenas "NormasDeProcedimentos/"
    – KmDroid
    Commented 27/12/2018 às 11:01

3 Respostas 3

8

Você pode usar expressões regulares para isolar parte da string usando String.replace():

const URL = "https://teste.teste.pt/sites/teste/Normativo/NormasDeProcedimentos/Documents/Histórico/"
const REGEX = /.*\/Normativo\/(.+?)\/.*/

console.log(URL.replace(REGEX, "$1"))

Explicação:

Utilizo uma expressão regular para criar um grupo com a parte da string que vem depois de /Normativo/ e depois substituo toda a string pelo conteúdo do grupo.

A regex:

.*\/Normativo\/(.+?)\/.*
  • .*: Casará com qualquer caractere 0 a N vezes;
  • \/Normativo\/: Casará com a string /Normativo/
  • (): Cria um grupo
  • .+: Casará com qualquer caractere 1 a N vezes;
  • ?: Torna o quantificador + non greedy (casará com a menor ocorrência possível)

Ou seja, da URL:

https://teste.teste.pt/sites/teste/Normativo/NormasDeProcedimentos/Documents/Histórico/

As partes da Regex que casarão serão:

  • .*: https://teste.teste.pt/sites/teste
  • \/Normativo\/: /Normativo/
  • (.+?): NormasDeProcedimentos (Este valor é capturado em um grupo)
  • \/.*: /Documents/Histórico/

Feito isso basta usar o String.replace() para substituir toda a string apenas pelo grupo capturado usando a notação $n onde n é o número do grupo capturado.

Como capturamos apenas um grupo na regex, então o número do grupo é 1 (Docs):

URL.replace(REGEX, "$1");
8

Se precisar captura a url atual você deve usar o código window.location.href. Se for estática você pode fazer direto como no código abaixo, basta um simples replace.

console.log(window.location.href)

let url = 'https://teste.teste.pt/sites/teste/Normativo/NormasDeProcedimentos/Documents/Histórico/'

url = url.replace('NormasDeProcedimentos/', '')
console.log(url)

Update:

Se deseja captura depois de Normativo/ até a próxima / este regex basta: (?<=Normativo\/)\w+\/

Explicando

  • (?<=) Look behind positive, ou seja olhando pra trás, procure onde têm o texto Normativo\/
  • w+\/ procure por um texto seguido de uma barra.

Traduzindo: Encontre um texto com barra que seja precedido pela palavra Normativo/

const expressao = /(?<=Normativo\/)\w+\//

let url = 'https://teste.teste.pt/sites/teste/Normativo/NormasDeProcedimentos/Documents/Histórico/'

let variavelCaptura = url.match(expressao)

url = url.replace(variavelCaptura, '')

console.log(url)

Compatibilidade do Look behind positive: http://kangax.github.io/compat-table/es2016plus/

8
  • Acho que você esqueceu de criar o grupo na regex, está dando erro quando executa. Commented 27/12/2018 às 11:51
  • @fernandosavio em qual exemplo? Pra mim funciona aqui
    – Marconi
    Commented 27/12/2018 às 11:52
  • No segundo, dá um erro no console. Está rodando normal pra ti? Commented 27/12/2018 às 11:53
  • No Firefox da erro, no Chrome tá normal. Estranho... Commented 27/12/2018 às 11:54
  • @fernandosavio nem sabia que não estava funcionando no Firefox, vou dá uma olhada!
    – Marconi
    Commented 27/12/2018 às 11:54
5

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/

3
  • 1
    Sabia que você ia escrever uma resposta debugando a regex! +1 :) Commented 27/12/2018 às 18:53
  • @fernandosavio Poxa, estou ficando tão previsível assim? :-)
    – hkotsubo
    Commented 27/12/2018 às 18:58
  • 1
    Depois de frequentar o site com frequência dá pra saber a área de mais domínio da galera e ver quando alguém tá coçando o dedo pra postar. Hahahaha Commented 27/12/2018 às 18:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .