Javascript lookbehind

As expressões regulares Javascript são uma ferramenta muito poderosa, mas não vêm com toda a gentileza incorporada que algumas outras linguagens podem desfrutar, como lookbehinds positivo / negativo.

Felizmente, existe uma maneira de imitar esse comportamento. Digamos que você queira escrever uma pequena função para receber uma string html e criar uma tag âncora a partir de qualquer string que deva ser um link (também conhecido como começa com http: //). O problema aqui é que você precisa ser capaz de verificar se o pedaço da string já é uma tag âncora html. É aqui que o lookbehind se torna útil, porque podemos fazer essa verificação e processar o pedaço de barbante conforme necessário.

Tudo bem, aqui está o código:

makeAnchorTags: function(str) {
    return str.replace(/(<a href=["'])?(http[s]?://[^s"']*)/gm,function($0, $1, $2) {
        var link = $2;
        return ($1 !== undefined) ? $0 : '<a href="' + link + '" target="_blank">' + link + '</a>';
    });
}

Tudo bem, agora vou detalhar o que está acontecendo. Primeiro a parte direta, escrevendo a expressão regular. Verificamos se existe uma ou nenhuma parte da tag âncora e capturamos antes de procurar a parte http. Em seguida, capturamos a parte http do link pesquisando até encontrar um espaço, ‘, ou “e adicionamos um parâmetro global e multilinha no final para que possamos pesquisar a string inteira e obter várias correspondências.

Agora a parte complicada. Replace pode receber um retorno de chamada e podemos passar nossas strings capturadas da regex. Passamos $ 0 (toda a string capturada), $ 1 (a parte âncora da string) e $ 2 (a parte link / href da string). Como queremos que o lookbehind ocorra na parte âncora da string, podemos simplesmente verificar se isso está definido ou não. Se estiver definido, isso significa que estamos olhando para uma tag âncora html formada corretamente, então retornamos a string inteira ($ 0). Se for indefinido, isso significa que não há tag âncora envolvendo nosso link, portanto, retornamos o link com uma tag âncora html adequada enrolada em torno dele.

Há muito mais que você pode fazer com essa técnica do que uma simples pesquisa de link! Experimente você mesmo e feliz codificação!