0

Existe alguma maneira de pegar comentários de uma html e converter para código html usando javascript?

Antes:

<div class="container">
<!-- [p] -->texto 1<!-- [/p] -->
<!-- [p] -->texto 2<!-- [/p] -->
<!-- [p] -->texto 3<!-- [/p] -->
</div>

Depois:

<div class="container">
    <p>texto 1</p>
    <p>texto 2</p>
    <p>texto 3</p>
</div>
4
  • Por que e como você pretende fazer isso? Commented 15/07/2019 às 19:51
  • 3
    Quem deu -1 podia deixar um comentário para ajudar a melhorar a pergunta. Eu posso concordar que é boa prática o autor da pergunta mostrar o que já tentou... de resto acho a pergunta interessante e relevante.
    – Sergio
    Commented 15/07/2019 às 19:54
  • Você quer q esse conteúdo apareça? pois está "Escondido"?
    – Yuri Dias
    Commented 15/07/2019 às 19:54
  • Eu vejo como recuperar esses comentários pelo node... mas como pegaria o valor entre cada comentário e reconstruir o dom? você que monta o html dessa forma? Commented 15/07/2019 às 20:11

3 Respostas 3

4

Regra geral é boa prática usar <template> para colocar código HTML na página, esse código não é ativado nem renderizado mas pode ser mais facilmente usado ou ativado.

Em código antigo ou onde isso não seja possível pode ser necessário extrair esse conteúdo de comentários HTML e fazer parse do HTML... o que nem sempre é simples.

Uma solução para o exemplo da pergunta seria:

function getHiddenHTML(el) {
  return [...el.childNodes].reduce((txt, node) => {
    let add = '';

    if (node.nodeType === 8) {
      add = node.nodeValue.replace(/\[/, '<').replace(/\]/, '>').trim();
    } else if (node.nodeType === 3 && node.childNodes.length) {
      add = getHiddenHTML(node);
    } else if (node.nodeType === 3) {
      add = node.textContent;
    } else {
      add = node.textContent;
    }
    return txt + add;
  }, '');
}

const content = document.querySelector('.container');
const html = getHiddenHTML(content);
console.log(html);
<div class="container">
  <!-- [p] -->texto 1
  <!-- [/p] -->
  <!-- [p] -->texto 2
  <!-- [/p] -->
  <!-- [p] -->texto 3
  <!-- [/p] -->
</div>

2
  • Valeu mesmo, era exatamente isso que eu precisava. Commented 19/07/2019 às 11:29
  • Então, eu não pretendo usar template, eu só queria converter os parágrafos em comentário, e depois reverter, é porque preciso fazer seleções no texto, e os parágrafos estavam dando vários problemas, principalmente na hora de reverter a seleção. Commented 19/07/2019 às 11:51
4

Acredito que a melhor forma é percorrer os nós filhos do seu elemento e tratar aqueles que possuem nodeType igual a 8, referente ao COMMENT_NODE, para identificar quais são comentários.

const container = document.querySelector('.container')
const COMMENT_NODE = 8

for (let element of container.childNodes) {
  if (element.nodeType !== COMMENT_NODE) {
    continue;
  }

  console.log(element.nodeValue);
}
<div class="container">
  <!-- [p] -->texto 1<!-- [/p] -->
  <!-- [p] -->texto 2<!-- [/p] -->
  <!-- [p] -->texto 3<!-- [/p] -->
</div>

Assim você já consegue obter os elementos que deseja e os respectivos conteúdos, ' [p] ' e ' [/p] '. Após isso, basta você tratar esses valores para gerar o elemento de deseja, possivelmente substituindo [ por < e ] por > e atualizando o DOM com os novos elementos.

2

Pode tentar com

target.replace(new RegExp(/<!-- \[((\/?)\w)\] -->/, 'g'), '<$1>');

Exemplo:

target = `
    <div class="container">
    <!-- [p] -->texto 1<!-- [/p] -->
    <!-- [p] -->texto 2<!-- [/p] -->
    <!-- [p] -->texto 3<!-- [/p] -->
    </div>`;
target.replace(new RegExp(/<!-- \[((\/?)\w)\] -->/, 'g'), '<$1>');
//saída: "<div class="container">
//        <p>texto 1</p>
//        <p>texto 2</p>
//        <p>texto 3</p>
//        </div>"

2
  • 2
    E quão seguro é tratar um conteúdo HTML com regex?
    – Woss
    Commented 15/07/2019 às 20:10
  • Contanto que não seja uma expressão complexa, como é o caso e o HTML não seja dinamico, não vejo problema. Talvez este link possa explicar melhor. No caso do que entendi na pergunta, acredito que possa ser uma possibilidade e sem causar problemas. Commented 15/07/2019 às 20:26

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 .