Filtering element codes

Question

Filtering element codes

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Talk, guys .. Blz? I have a question here. I'm developing a chat app in vue, and let's say I send or receive a message like this:

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 I can, for example, 'scan' the whole message and check all tags, elements, scripts, and so on. start different from and end with I add the tag code in the front and the end? Alas, 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 that place and then paste the code <code><header> <div class="title text-center"><h1>Testando</h1></div> </header></code>.

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

javascript regex vue.js

asked by anonymous 10.06.2018 / 20:00

2 answers

0

From what I understand, you want to print as HTML only the code tag, and your content 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 code tags and then replace the contents of the message. But this is not enough, because when you print the message, the other tags that are inside code will be printed as HTML, that is, a h1 will be printed as a large text in the message . To work around this problem, we "convert" the HTML inside the code tags to 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>

11.06.2018 / 15:24

NodeMCU does not receive data as I send via UDP Protocol WebService of the City of Salvador, error: 1057 Rejection: Signature differs from calculated

score 0 · Accepted Answer

I suggest not doing this work with regex but creating elements with the JavaScript API.

It's not clear in 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);