1

Estou criando uma aplicação que lê o conteúdo de uma página na internet e depois obtém o texto de um elemento <textarea> desse conteúdo. Para realizar tal tarefa, eu decidi utilizar regex.

O problema é que não tenho muito conhecimento em regex e não consigo desenvolver uma lógica em JavaScript para obter o texto do elemento. Abaixo está uma String de exemplo e o código que tentei fazer para obter o texto:

content = '4354543/sfd f^^ <textarea id="text">Hello World! 34% #_2@.;/°? </textarea> fr fdgdf //fdg3';

result = content.match(/<textarea id="text">\w*/)[0];
console.log(result);
12
  • Entendi que vc decidiu usar a RegEx. Mas não seria melhor usar o método getElementById(), já que sua string é uma página HTML?
    – LipESprY
    Commented 8/03/2020 às 18:09
  • E como eu usaria esse método com uma string ? Commented 8/03/2020 às 18:11
  • 2
    Mais facil <textarea[^>]*>([^<]*) provavelmente (se tiver que apelar tanto assim, a ponto de precisar de RegEx, claro)
    – Largato
    Commented 8/03/2020 às 18:29
  • 2
    DOMParser ou qq outra API é bem mais garantido, pois basta o HTML mudar um pouco pra quebrar a regex. Por ex, se o textarea estiver dentro de comentários (<!-- <textarea> etc -->), a regex não detecta (e uma regex pra reconhecer comentários HTML é bem complicada), já DOMParser ignora corretamente (é só um exemplo, há vários outros casos que fazem regex ser inviável dependendo do caso) - por fim, vale sempre ler aqui e aqui
    – hkotsubo
    Commented 8/03/2020 às 19:12
  • 1
    Só pra complementar (e fazer um pequeno "jabá"), acabei de responder justamente sobre isso (usar um parser versus regex), inclusive mostrando alguns exemplos para ilustrar melhor porque a solução com regex é pior...
    – hkotsubo
    Commented 17/03/2020 às 13:45

3 Respostas 3

2

Use DOMParser desta forma:

var content = '4354543/sfd f^^ <textarea id="text">Hello World! 34% #_2@.;/°? </textarea> fr fdgdf //fdg3';
var result = new DOMParser().parseFromString(content, "text/html");
document.write(result.querySelector("#text").textContent);

// ou result.getElementById("text").textContent

Ele converte a string num objeto document com os nós. Aí basta buscar o id desejado com .querySelector ou .getElementById.

3
  • 4
    Vale dizer que se ele for pegar o conteúdo com ajax, nem do DOMParser precisa (o ajax ja pode receber um Document)
    – Largato
    Commented 8/03/2020 às 18:33
  • Obrigado Sam! Estou desenvolvendo a aplicação em Node mas também queria saber sobre utilizar o querySelector com uma string. Tenho certeza que vou utilizar o DOMParser bastante no futuro :) Commented 8/03/2020 às 18:47
  • @JeanExtreme002 Blz. Mas acho que não precisa carregar um biblioteca externa pra fazer algo tão simples.
    – Sam
    Commented 8/03/2020 às 19:05
1

Você pode usar a bilioteca jsdom para obter acesso a uma API de manipulação do DOM, porém não sei dizer se é a nativa ou apenas simula a nativa:

const jsdom = require("jsdom");

const dom = new jsdom.JSDOM("<!DOCTYPE html><textarea>Hello world</textarea>");

console.log(dom.window.document.querySelector("textarea").value);
4
  • Obrigado, era exatamente o que eu precisava. Commented 8/03/2020 às 18:44
  • Esqueça o que eu comentei, agora entendi que a questão é sobre Node.
    – Syzoth
    Commented 8/03/2020 às 20:43
  • @GuilhermeNascimento a API do DOMParser não existe no Node, ou não? Você pode criar sua resposta com a melhor solução que imagina. Eu preferia usar a lib junto com o fetch se ela facilitar e não houver algo que impeça
    – Costamilam
    Commented 8/03/2020 às 20:46
  • @Costamilam foi o que eu disse, a pergunta do autor é ambigua, tive que ler os comentarios para ver que se tratava de Node, no caso a saída parece ser mesmo usar pacotes como respondeu.
    – Syzoth
    Commented 8/03/2020 às 20:48
1

Seguindo a ideia de parsear com expressão regular, poderia ser assim:

var str = '4354543/sfd f^^ <textarea id="text">Hello World! 34% #_2@.;/°? </textarea> fr fdgdf //fdg3';
matchs = str.match(/\<textarea[\s\S]*?id\=\"text\"[\s\S]*?\>([\s\S]+?)\<\/textarea\>/);
console.log(matchs[1]);

Em resumo, eu busco a abertura da tag textarea que tenha o id="text", seguido de um grupo de busca, que será o índice 1 do match, seguido do fechamento da tag textarea.

A classe de caracteres [\s\S] é um "macete" que encontra qualquer coisa MESMO. Pulo do gato muito explanado pelo @hkotsubo. Isso não vai quebrar a busca caso tenha quebra de linha e etc.

Não vou abordar tudo que foi usado na expressão regular, já que é aceitável uma solução melhor que vou apresentar:

var str = (
    '<textarea id="um_id_qualquer">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</textarea>'
    +'<textarea id="2_id_qualquer">Dignissimos ducimus quas illo a expedita pariatur maxime magni,</textarea>'
    +'<textarea id="tres_id_qualquer">amet sint laborum eveniet, quam,</textarea>'
    +'<textarea id="text">Hello World! 34% #_2@.;/°? </textarea>'
    +'<textarea id="4_id_qualquer">recusandae enim iste delectus quidem! Iusto, at amet!</textarea>'
);

var parser = new DOMParser().parseFromString(str, "text/html");

console.log(parser.getElementById('text').innerHTML);

Como a str é um HTML válido, basta criar um DOMParser e usar os métodos do próprio DOM.

3
  • 1
    Obrigado Lip por me ajudar. Commented 8/03/2020 às 18:48
  • 3
    ([\s\S]+) vai dar problema se tiver 2 textarea. ou usa +? pra não ficar "fominha", ou faz como eu fiz no comment da pergunta [^<]* "tudo menos <"
    – Largato
    Commented 8/03/2020 às 19:01
  • @Bacco pior que eu coloquei o "anti-fominha" em todas as classes e esqueci dessa. Vlw por notificar! kk PS: Prefiro bindar o fechamento da tag por completo. Vai que o conteúdo do textarea tenha um simples "menor que" (<)...
    – LipESprY
    Commented 8/03/2020 às 21:12

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 .