Filter code elements

Question

Speak, guys.. Blz? I have a question here. I am developing a chat app on Youtube, and say I send or receive a message as follows:

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>."

When rendering the message, the link, span, H1, etc., will be created.. Is there any way to, for example, I 'sweep' the whole message and check all the tags, elements, scripts, anyway , and what to start other than and finish with I add the tag code in front and at the end? In this case, the following message would look like this:

Hi, so-and-so. Go to this link and type <code><span>Meu nome é <a href="teste">teste</a></span><code>. After that, go to such a place and then paste the code <code><header> <div class="title text-center"><h1>Testando</h1></div> </header></code>.

That is, he verified that there is a link and did nothing, then checked that there is a span tag, found everything that is inside it and added it inside a code tag.. continued, saw that there is a header tag, found the end of it and added it inside a tag code. I tried with regex and could not even in the bullet.. If anyone can give me a help. <3

Answer 1

I suggest not doing this job with regex but creating elements with the Javascript API.

It’s not clear on the question how you’re going to use/integrate this into Vue, but you can do something like this:

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);

Answer 2

From what I understand, you want to print as HTML only the tag code, and its contents should be shown as plain text. What can be done is to apply a regex to select the text that should be inside the code tags, wrap this text with the tags code and then replace the content of the message. However, just this is not enough, because when you print the message, the other tags that are within code will be printed as HTML, ie a h1 will be printed as a very large text in the message. To get around this problem, we "convert" the HTML into the tags code for plain text. The final solution, with pure Javascript, looks like this:

// 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>