如何在DOM中取消注釋行內腳本-有解無憂

假設我的 DOM 中有一個已被注釋掉的行內腳本：

<!-- <script type='text/javascript' id='my-script'>
  alert('Boo!');
</script> -->

我可以在 DOM 中成功找到所說的評論，但如果我

const script = comment.nodeValue;
comment.replaceWith(script);

評論確實在 DOM 中被替換了；然而，它被一個文本節點取代，而不是一個腳本節點。

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>

除了通過正則運算式決議 comment.nodeValue 并手動構建腳本節點之外，有沒有辦法將它作為腳本插入？

uj5u.com熱心網友回復：

這是一種無需使用正則運算式即可完成的方法。

基本上，您創建一個新的腳本元素，然后通過創建一個虛擬腳本元素（從注釋中的文本）并從虛擬物件中讀取屬性和 innerHTML 來設定新腳本元素的屬性和 innerHTML。

注意：我不只是插入的原因dummyScriptElem是因為插入時不會導致腳本運行。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/495677.html

標籤：javascript dom

上一篇：你可以在React中動態設定bodyid嗎？

下一篇：為什么即使我成功回圈100次并列印console.log，我也無法在javascript控制臺中看到100次輸出？