3
respostas

Fiz a implementação do objeto um pouco diferente

Fiz o array de objetos um pouco diferente, coloquei um campo text, e href representando o titúlo e o link.

ai teremos uma forma diferente de acessesa-los.

function extractLinks(string) {
    const regex = /\[([^[\]]*?)\]\((https?:\/\/[^\s?#.].[^\s]*)\)/gm;
    const captures = [...string.matchAll(regex)];
    const links = captures.map(([_, text, href]) => ({ text, href }));
    return links;
}

O array captures:

[
  [
    '[FileList](https://developer.mozilla.org/pt-BR/docs/Web/API/FileList)',
    'FileList',
    'https://developer.mozilla.org/pt-BR/docs/Web/API/FileList',
    index: 148,
    input: 'A interface File provê informações sobre arquivos e permite ao JavaScript a acessar seu conteúdo.\n' +
      '\n' +
      'São geralmente recuperados a partir de um objeto [FileList](https://developer.mozilla.org/pt-BR/docs/Web/API/FileList)\n' +
      'que é retornado como resultado da seleção, pelo usuário, de arquivos através do elemento\n' +
      '[<input>](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input), a partir do objeto\n' +
      '[DataTransfer](https://developer.mozilla.org/pt-BR/docs/Web/API/DataTransfer) utilizado em operações de arrastar e\n' +
      'soltar, ou a partir da API `mozGetAsFile()` em um\n' +
      '[HTMLCanvasElement](https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCanvasElement). Em Gecko, códigos com\n' +
      'privilégiios podem criar objetos File representando qualquer arquivo local sem a intereção do usuário (veja\n' +
      '[Implementation notes](https://developer.mozilla.org/pt-BR/docs/Web/API/File#implementation_notes) para mais\n' +
      'informações.).\n' +
      '\n' +
      '[Teste de retorno 400](https://httpstat.us/404). [gatinho salsicha](http://gatinhosalsicha.com.br/)\n',
    groups: undefined
  ],
  [
    '[<input>](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input)',
    '<input>',
    'https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input',
    index: 307,
    input: 'A interface File provê informações sobre arquivos e permite ao JavaScript a acessar seu conteúdo.\n' +
      '\n' +
      'São geralmente recuperados a partir de um objeto [FileList](https://developer.mozilla.org/pt-BR/docs/Web/API/FileList)\n' +
      'que é retornado como resultado da seleção, pelo usuário, de arquivos através do elemento\n' +
      '[<input>](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input), a partir do objeto\n' +
      '[DataTransfer](https://developer.mozilla.org/pt-BR/docs/Web/API/DataTransfer) utilizado em operações de arrastar e\n' +
      'soltar, ou a partir da API `mozGetAsFile()` em um\n' +
      '[HTMLCanvasElement](https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCanvasElement). Em Gecko, códigos com\n' +
      'privilégiios podem criar objetos File representando qualquer arquivo local sem a intereção do usuário (veja\n' +
      '[Implementation notes](https://developer.mozilla.org/pt-BR/docs/Web/API/File#implementation_notes) para mais\n' +
      'informações.).\n' +
      '\n' +
      '[Teste de retorno 400](https://httpstat.us/404). [gatinho salsicha](http://gatinhosalsicha.com.br/)\n',
    groups: undefined
  ],
  // os damais arrays aqui...
]

saída:

[
  {
    text: 'FileList',
    href: 'https://developer.mozilla.org/pt-BR/docs/Web/API/FileList'
  },
  {
    text: '<input>',
    href: 'https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input'
  },
  {
    text: 'DataTransfer',
    href: 'https://developer.mozilla.org/pt-BR/docs/Web/API/DataTransfer'
  },
  {
    text: 'HTMLCanvasElement',
    href: 'https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCanvasElement'
  },
  {
    text: 'Implementation notes',
    href: 'https://developer.mozilla.org/pt-BR/docs/Web/API/File#implementation_notes'
  },
  { 
    text: 'Teste de retorno 400',
    href: 'https://httpstat.us/404'
  },
  {
    text: 'gatinho salsicha',
    href: 'http://gatinhosalsicha.com.br/'
  }
]
3 respostas

Parabéns irmão, achei bem melhor a leitura assim Estava vendo o seu código aqui, só não entendi uma coisa. // const links = captures.map(([_, text, href]) => ({ text, href })); nessa linha, qual parâmetro vc não passou ali?

Vou alterar o exemplo, mas basicamente, o array (ou se quiser chamar de matriz) devolvido pelo ... = [...string.matchAll(regex)]; é esse aqui:

[
  [
    '[FileList](https://developer.mozilla.org/pt-BR/docs/Web/API/FileList)',
    'FileList',
    'https://developer.mozilla.org/pt-BR/docs/Web/API/FileList',
    index: 148,
    input: 'A interface File provê informações sobre arquivos e permite ao JavaScript a acessar seu conteúdo.\n' +
      '\n' +
      'São geralmente recuperados a partir de um objeto [FileList](https://developer.mozilla.org/pt-BR/docs/Web/API/FileList)\n' +
      'que é retornado como resultado da seleção, pelo usuário, de arquivos através do elemento\n' +
      '[<input>](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input), a partir do objeto\n' +
      '[DataTransfer](https://developer.mozilla.org/pt-BR/docs/Web/API/DataTransfer) utilizado em operações de arrastar e\n' +
      'soltar, ou a partir da API `mozGetAsFile()` em um\n' +
      '[HTMLCanvasElement](https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCanvasElement). Em Gecko, códigos com\n' +
      'privilégiios podem criar objetos File representando qualquer arquivo local sem a intereção do usuário (veja\n' +
      '[Implementation notes](https://developer.mozilla.org/pt-BR/docs/Web/API/File#implementation_notes) para mais\n' +
      'informações.).\n' +
      '\n' +
      '[Teste de retorno 400](https://httpstat.us/404). [gatinho salsicha](http://gatinhosalsicha.com.br/)\n',
    groups: undefined
  ],
  [
    '[<input>](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input)',
    '<input>',
    'https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input',
    index: 307,
    input: 'A interface File provê informações sobre arquivos e permite ao JavaScript a acessar seu conteúdo.\n' +
      '\n' +
      'São geralmente recuperados a partir de um objeto [FileList](https://developer.mozilla.org/pt-BR/docs/Web/API/FileList)\n' +
      'que é retornado como resultado da seleção, pelo usuário, de arquivos através do elemento\n' +
      '[<input>](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input), a partir do objeto\n' +
      '[DataTransfer](https://developer.mozilla.org/pt-BR/docs/Web/API/DataTransfer) utilizado em operações de arrastar e\n' +
      'soltar, ou a partir da API `mozGetAsFile()` em um\n' +
      '[HTMLCanvasElement](https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCanvasElement). Em Gecko, códigos com\n' +
      'privilégiios podem criar objetos File representando qualquer arquivo local sem a intereção do usuário (veja\n' +
      '[Implementation notes](https://developer.mozilla.org/pt-BR/docs/Web/API/File#implementation_notes) para mais\n' +
      'informações.).\n' +
      '\n' +
      '[Teste de retorno 400](https://httpstat.us/404). [gatinho salsicha](http://gatinhosalsicha.com.br/)\n',
    groups: undefined
  ],
  // os damais arrays aqui...
]

Cada item dessa matriz retornada pela String.matchAll(), é um array, e segue o mesmo formato que é devolvido pelo RegExp.exec():

Cada item da matriz devolvida pelo matchAll()

Percebe que o primeiro item de cada array (captures[0][0] ou captures[1][0]) ou captures[indiceQualquer][0]) não nos interessa nesse caso?

//captures[0][0] - isso não queremos
'[FileList](https://developer.mozilla.org/pt-BR/docs/Web/API/FileList)',

//ou

//captures[1][0] - isso não queremos
'[<input>](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input)',

Por isso:

([_, text, href]) => ...

O underscore "_" é uma convenção comumente utilizada, para dizer que não queremos fazer nada com algum parâmetro. poderíamos utilizar um nome mesmo, e somente ignorá-lo, como:

function extractLinks(string) {
    const regex = /\[([^[\]]*?)\]\((https?:\/\/[^\s?#.].[^\s]*)\)/gm;
    const captures = [...string.matchAll(regex)];
    const links = captures.map(([matched, text, href]) => ({ text, href }));
    // nada é feito com matched
    return links;
}

de alguma forma, devemos "pular" o primeiro item do array captures[indiceQualquer][0], pois o que nos interessa de fato, é o segundo e o terceiro item captures[indiceQualquer][1] e captures[indiceQualquer][2], pois obrigatoriamente, o JavaScript chama nossa função callback passando um item de captures, que por sua vez é um array, e esse array, já recebemos fazendo a desestruturação direta

Note que captures é um array de: arrays como itens, ou seja, captures é uma matriz.

Muito obrigado! consegui entender, agradeço a explicação. basicamente

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software