How to convert HTML comments to HTML code?

Asked

Viewed 106 times

0

Is there any way to take comments from an html and convert to html code using javascript?

Before:

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

Afterward:

<div class="container">
    <p>texto 1</p>
    <p>texto 2</p>
    <p>texto 3</p>
</div>
javascript html

  • Why and how you intend to do this?

  • 3

    Who gave -1 could leave a comment to help improve the question. I can agree that it is good practice for the author of the question to show what he has already tried... otherwise I find the question interesting and relevant.

  • Do you want this content to appear? because it’s "Hidden"?

  • I see how to retrieve these comments by Ode... but how would you take the value between each comment and rebuild the gift? you who assembles html in this way?

3 answers

4

I believe the best way is to walk through the child nodes of your element and treat those who possess nodeType equal to 8, referring to COMMENT_NODE, to identify which are comments.

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>

So you can already get the elements you want and their contents, ' [p] ' and ' [/p] '. After that, you just need to treat these values to generate the desired element, possibly replacing [ for < and ] for > and updating the DOM with the new elements.

4


It is generally good practice to use <template> to put HTML code on the page, this code is not enabled or rendered but can be more easily used or activated.

In old code or where this is not possible it may be necessary to extract this content from HTML comments and parse it from HTML... which is not always simple.

A solution to the question example would be:

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>

  • Thank you very much, it was exactly that that I needed.

  • So, I don’t intend to use template, I just wanted to convert the paragraphs into comment, and then revert, it’s because I need to make selections in the text, and the paragraphs were giving various problems, mainly at the time of reversing the selection.

2

You can try with 

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

Example: 

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

    And how safe it is to treat HTML content with regex?

  • As long as it is not a complex expression, as is the case and HTML is not dynamic, I see no problem. Maybe this link can explain better. In the case of what I understood in the question, I believe it can be a possibility and without causing problems.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.