Digamos que tengo un script en línea en mi DOM que ha sido comentado:
<!-- <script type='text/javascript' id='my-script'> alert('Boo!'); </script> -->Puedo encontrar con éxito dicho comentario en el DOM, pero si
const script = comment.nodeValue; comment.replaceWith(script);De hecho, el comentario se reemplaza en el DOM; sin embargo, se reemplaza por un nodo de texto, no por un nodo de secuencia de comandos.
function myFunction() { const locator = document.getElementById('foo'); let comment = locator.nextSibling; if ( 3 === comment.nodeType ) { comment = comment.nextSibling; } if ( 8 !== comment.nodeType ) { console.warn('Oops! That\'s not a comment!'); } else { const script = comment.nodeValue; comment.replaceWith(script); } } <div id='foo'></div> <!-- <script type='text/javascript' id='my-script'> alert('Boo!'); </script> --> <button onclick="myFunction()">Click me</button>¿Hay alguna forma de insertarlo como una secuencia de comandos que no sea analizando la expresión regular comment.nodeValue y creando manualmente un nodo de secuencia de comandos?
Aquí hay una forma en que puede hacerlo sin necesidad de recurrir a expresiones regulares.
Básicamente, crea un nuevo elemento de secuencia de comandos y luego configura los atributos del nuevo elemento de secuencia de comandos y el código HTML interno creando un elemento de secuencia de comandos ficticio (a partir del texto en el comentario) y leyendo los atributos y el código HTML interno del elemento ficticio.
Nota: La razón por la que no solo inserto dummyScriptElem es porque eso no hace que el script se ejecute cuando se inserta.
const bodyElem = document.querySelector('body'); const commentElem = getAllComments(bodyElem)[0]; const scriptElemAsStr = commentElem.nodeValue; const dummyScriptElem = createElementFromHTML(scriptElemAsStr); //commentElem.replaceWith(dummyScriptElem); //this doesn't run the script when it's inserted so instead we create newScriptElem below and insert that instead const newScriptElem = document.createElement('script'); //set newScriptElem's attributes and innerHTML to match script tag in commentElem for (let attrName of dummyScriptElem.getAttributeNames()) { const attrValue = dummyScriptElem.getAttribute(attrName); newScriptElem.setAttribute(attrName, attrValue); } newScriptElem.innerHTML = dummyScriptElem.innerHTML; commentElem.replaceWith(newScriptElem); //util functions function createElementFromHTML(htmlString) { const div = document.createElement('div'); div.innerHTML = htmlString.trim(); return div.firstChild; } function getAllComments(rootElem) { const comments = []; const iterator = document.createNodeIterator(rootElem, NodeFilter.SHOW_COMMENT, () => NodeFilter.FILTER_ACCEPT, false); let curNode; while (curNode = iterator.nextNode()) { comments.push(curNode); } return comments; } <!-- <script type='text/javascript' id='my-script'> alert('Boo!'); </script> -->