1

Fala, galera.. Blz? To com uma dúvida aqui. Estou desenvolvendo um app de chat em vue, e digamos que eu envie ou receba uma mensagem da seguinte forma:

msg = "Oi, fulano. Acesse esse <a href="link">link</a> e digite <span>Meu nome é <a href="teste">teste</a></span>. Depois disso, vá até tal lugar e então cole o código <header> <div class="title text-center"><h1>Testando</h1></div> </header>."

Ao renderizar a mensagem, será criado o link, span, h1, etc.. Existe alguma forma de , por exemplo, eu 'varrer' a mensagem toda e verificar todas as tags, elementos, scripts, enfim , e o que começar diferente de e terminar com eu adicionar a tag code na frente e no final? Ai, no caso, a seguinte mensagem ficaria assim:

Oi, fulano. Acesse esse link e digite <code><span>Meu nome é <a href="teste">teste</a></span><code>. Depois disso, vá até tal lugar e então cole o código <code><header> <div class="title text-center"><h1>Testando</h1></div> </header></code>.

Ou seja, ele verificou que existe um link e não fez nada, depois verificou que existe uma tag span, encontrou tudo que está dentro dela e adicionou ela dentro de uma tag code.. continuou, viu que existe uma tag header, encontrou o final dela e adicionou ela dentro de uma tag code. Tentei com regex e não consegui nem na bala.. Se alguém puder me dar um help.. <3

2
  • Não percebi bem a pergunta, podes rever e explicar melhor o código/string de entrada e como queres o resultado? o <a> não deve ficar <code><a></code>?
    – Sergio
    Commented 11/06/2018 às 9:55
  • Isso, Sérgio! Links (a) nao devem ficar dentro de code. PORÉM, caso esse link esteja dentro de qualquer outra tag, ai ele é englobado junto com a code! Commented 11/06/2018 às 22:45

2 Respostas 2

0

Sugiro não fazeres esse trabalho com regex mas sim criando elementos com a API JavaScript.

Não está claro na pergunta como vais usar/integrar isso no Vue, mas podes fazer algo assim:

const msg = `Oi, fulano. Acesse esse <a href="link">link</a> e digite <span>Meu nome é <a href="teste">teste</a></span>. Depois disso, vá até tal lugar e então cole o código <header> <div class="title text-center"><h1>Testando</h1></div> </header>.`

function wrapInCode(el) {
  const parent = el.parentElement;
  const code = document.createElement('code');
  parent.replaceChild(code, el);
  code.appendChild(el);
}

const proxy = document.createElement('div');
proxy.innerHTML = msg;
[...proxy.children].forEach(el => {
  if (el.tagName.toLowerCase() !== 'a') wrapInCode(el);
});

console.log(proxy.innerHTML);

3
  • Quase consegui aqui com regex mesmo. Exemplo do regex regex101.com/r/yGqic2/1 Ele está fazendo quase como quero. Ignorando os links que estão fora de outras tags do html e selecionando tudo que seja diferente de text e link. Porém, ao dar um match no regex, ele me retorna certinho <span>Meu nome é <a href=\"teste\">teste</a></span> , mas na outra ele retorna quebrado. Veja, por favor, se puder, o exemplo no jsbin jsbin.com/rokivuvuyo/edit?js,console,output Commented 12/06/2018 às 12:44
  • @RafaelPelizza fazer com regex é muito menos seguro que como indiquei. A minha resposta é sem regex, porque acho que é a melhor solução. Não tenho tempo de ajudar a procurar uma solução com regex que já sei que pode ter casos inesperados e vai precisar de ajustes sem fim.
    – Sergio
    Commented 12/06/2018 às 13:40
  • Certo. Vou ver c consigo aqui sim! Commented 12/06/2018 às 14:32
0

Pelo o que entendi, você quer imprimir como HTML somente a tag code, sendo que o seu conteúdo deve ser mostrado como texto simples. O que pode ser feito é aplicar um regex para selecionar o texto que deve ficar dentro das tags code, envolver esse texto com as tags code e depois substituir o conteúdo da mensagem. Porém, apenas isso não é o suficiente, porque quando você for imprimir a mensagem, as outras tags que estão dentro de code vão ser impressas como HTML, ou seja, um h1 vai ser impresso como um texto bem grande na mensagem. Para contornar esse problema, "convertemos" o HTML dentro das tags code para texto simples. A solução final, com Javascript puro, fica assim:

// Esse é o regex que para selecionar somente o conteúdo entre as tags <span> e <header>, você pode adicionar outras tags conforme necessário
var regex = /<(span|header)(.*?)<\/(span|header)>/gm;

// Mensagem que vamos usar para testar
var msg = "Oi, fulano. Acesse esse <a href='link'>link</a> e digite <span>Meu nome é <a href='teste'>teste</a></span>. Depois disso, vá até tal lugar e então cole o código <header> <div class='title text-center'><h1>Testando</h1></div> </header>.";

// Aplicando o regex na mensagem
var resultado = msg.match(regex);

// Para cada resultado do regex, que é um array, envolvemos o texto com a tag <code> e substituímos o texto antigo com o novo
resultado.forEach(function(valor, index) {
  msg = msg.replace(valor, "<code>" + valor + "</code>")
});

// Porém, o que está dentro da tag <code> vai continuar sendo impresso como html, por exemplo, o texto com a tag <h1> vai sair bem grande. Para corrigir isso vamos substituir todo o conteúdo HTML dentro das tags <code> para texto simples, dessa forma:
document.getElementById("resultado").innerHTML = msg;
document.querySelectorAll("code").forEach(function(valor, index) {
  valor.textContent = valor.innerHTML;
});
<div id="resultado">

</div>

2
  • Qual isso amigo hehe Os links (a) nao devem ficar dentro de code. PORÉM, caso esse link esteja dentro de qualquer outra tag, ai ele é englobado junto com a code! Commented 11/06/2018 às 22:45
  • Quase consegui aqui com regex mesmo. Exemplo do regex regex101.com/r/yGqic2/1 Ele está fazendo quase como quero. Ignorando os links que estão fora de outras tags do html e selecionando tudo que seja diferente de text e link. Porém, ao dar um match no regex, ele me retorna certinho <span>Meu nome é <a href=\"teste\">teste</a></span> , mas na outra ele retorna quebrado. Veja, por favor, se puder, o exemplo no jsbin jsbin.com/rokivuvuyo/edit?js,console,output Commented 12/06/2018 às 12:45

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 .