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