將HTML下載到允許的標簽

Question

除了列表中給出的標簽之外，我想刪除所有HTML標簽（但不包括內容）。

我想用Node做到這一點。

以下正則表達式可以匹配標簽<[a|br].+?>|<\\/[a]>但是如何繼續刪除除匹配的標簽之外的所有標簽？

Answer 1

僅替換a和br ：

1. 沒有| in sets [] 。 集合[a|br]是： a ， | ， b或r 。 請改用非捕獲組。
2. .+? 應該是.*? 替換<a>和<br> 。
3. 集合[a]可能只是a 。

嘗試這個：

/<(?:a|br).*?>|<\/a>/g

https://regex101.com/r/KWJi01/2

要替換除a和br之外a所有標記：

使用此正則表達式：

/<(?:(?!\/?a|br).*?)>/g

https://regex101.com/r/KWJi01/3

Answer 2

在不使用正則表達式的情況下，該問題的一種替代解決方案是以下方法：

// creating a function which takes two arguments:
// htmlString: String, a string of HTML to process,
// permitted:  Array, an array of HTML element tag-names.
function filterHTML(htmlString, permitted) {

  // here we iterate over the Array of permitted elements,
  // and convert any uppercase tag-names to lowercase:
  permitted = permitted.map(
    el => el.toLowerCase()
  );

  // creating a new element in which to hold the passed-in
  // string of HTML when parsed into HTML:
  let temp = document.createElement('div');

  // assigning the passed-in string of HTML as the
  // innerHTML of the temp element:
  temp.innerHTML = htmlString;

  // finding all elements held within the temp element,
  // and passing the NodeList to Array.from() in order
  // to convert the Array-like NodeList into an Array:
  let allElements = Array.from(temp.querySelectorAll('*'));

  // iterating over the array of found elements, using
  // Array.prototype.forEach():
  allElements.forEach(

    // using an Arrow function, 'element' is the current
    // element of the Array of elements over which we're
    // iterating:
    element => {

      // if the current element's tagName - converted to
      // lowercase - is not found within the Array of
      // permitted tags:
      if (permitted.indexOf(element.tagName.toLowerCase()) === -1) {

        // while the current (unpermitted) element has
        // a first-child:
        while (element.firstChild) {

          // we access the element's parent node, and
          // call node.insertBefore() to place the
          // first-child of the element before the
          // element (removing it from the element
          // which is unpermitted and placing it as
          // a previous-sibling):
          element.parentNode.insertBefore(element.firstChild, element);
        }

        // finding the element's parent node, and calling
        // node.removeChild() in order to remove the current
        // element from its parent node (and therefore from
        // the temp element):
        element.parentNode.removeChild(element);
      }
    });

  // here we return the innerHTML of the temp element, after
  // all unpermitted elements have been removed:
  return temp.innerHTML;
}

// the allowed tags, to be used in the above function,
// note that the tags do not have the '<', '>' or any
// attributes:
let allowedTags = ['br', 'div'];

// the following is just to visually display on the page
// the unprocessed and processed innerHTML, and also the
// rendered HTML following the processing:
document.querySelector('#input').textContent = document.querySelector('#test').innerHTML;

document.querySelector('#output').textContent = filterHTML(document.querySelector('#test').innerHTML, allowedTags).trim();

document.querySelector('#result').innerHTML = document.querySelector('#output').textContent;

 function filterHTML(htmlString, permitted) { let temp = document.createElement('div'); temp.innerHTML = htmlString; let allElements = Array.from(temp.querySelectorAll('*')); allElements.forEach( element => { if (permitted.indexOf(element.tagName.toLowerCase()) === -1) { while (element.firstChild) { element.parentNode.insertBefore(element.firstChild, element); } element.parentNode.removeChild(element); } }); return temp.innerHTML; } let allowedTags = ['br', 'div']; document.querySelector('#input').textContent = document.querySelector('#test').innerHTML; document.querySelector('#output').textContent = filterHTML(document.querySelector('#test').innerHTML, allowedTags).trim(); document.querySelector('#result').innerHTML = document.querySelector('#output').textContent; 

 div { border: 2px solid #000; margin: 0 0 1em 0; padding: 0.5em; box-sizing: border-box; border-radius: 1em; } div[id$=put] { white-space: pre-wrap; } #input { border-color: #f00; } #output { border-color: limegreen; } ::before { color: #666; display: block; border-bottom: 1px solid #666; margin-bottom: 0.5em; } #input::before { content: 'The original innerHTML of the "#test" element:'; } #output::before { content: 'The filtered innerHTML, with only permitted elements remaining:' } #result::before { content: 'This element shows the filtered HTML of the "test" element:' } 

 <div id="test"> <div><span> <a href="#">link text!</a> <br /> <hr /> <div>div text!</div> </span></div> </div> <div id="input"></div> <div id="output"></div> <div id="result"></div> 

JS小提琴演示 。

參考文獻：

• Array.from() 。
• Array.prototype.forEach() 。
• Array.prototype.indexOf() 。
• Array.prototype.map() 。
• 箭頭功能 。
• document.createElement() 。
• document.querySelector() 。
• document.querySelectorAll() 。
• let聲明 。
• Node.firstChild 。
• Node.insertBefore() 。
• Node.parentNode 。
• Node.removeChild() 。
• String.prototype.toLowerCase() 。
• while () {...} 。