剥离HTML到允许的标签
我想删除所有的HTML标签（但不是内容），除了在列表中给出的。
我想用Node来做这个。
下面的正则expression式可以匹配标签<[a|br].+?>|<\/[a]>但是我怎样才能删除除匹配的标签外的所有标签？
要只replacea和br ：
- 没有
|在集[]。 set[a|br]是：a，|，b或r。 改为使用非捕获组。 -
.+?应该是.*?取代<a>和<br>。 - 集合
[a]可能只是a。
尝试这个：
/<(?:a|br).*?>|<\/a>/g
https://regex101.com/r/KWJi01/2
要replace除a和br之外a所有标签：
使用这个正则expression式：
/<(?:(?!\/?a|br).*?)>/g
这个问题的另一个解决scheme，不使用正则expression式，是以下方法：
// 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>