删除除 img 标签之外的所有标签

Question

我需要正则表达式或其他内容来删除 contentEditable div 中的所有标记，但保留具有特定 class< 的 img 标记/code> 或 id，我该怎么做？

现在我使用：

.replace(/(<\/?.*?>)/gi, '');

但它会删除所有标签。

我做了这个：

var element = document.getElementById("myDiv").children;
   for(var i=0; i<element .length;i++)
   {
     if(element[i].tagName != "IMG" || element[i].className != "requiredClassName")
     {
       element[i].parentNode.removeChild(element[i]);
     }
   }

Answer 1

var child=document.getElementById('editableDIV').firstChild;
while(child) {
  var removeNode=null;
  if(child.tagName&&(child.tagName.toUpperCase()!=='IMG'||
     child.id!=='myid'||
     child.className!=='myclass')) removeNode=child;
  child=child.nextSibling;
  if(removeNode)removeNode.parentNode.removeChild(removeNode);
}

Answer 2

（如果您需要纯 JS ）：也许更好的方法是收集所有元素，然后检查它们的类/id 并执行操作。好主意是使用 DOM，而不是正则表达式。 DOM 用于 HTML 元素操作。

（或使用 jQuery ）：简单的代码就可以做到这一点。只需收集所有 div 的子级并在 .each() 循环中检查它们的类即可；

例如：

$('#contentEditable').each( function( index ) {
    if( !this.is( 'img' ) && ( this.is('.someclass') || this.is('#someid') ) ) {
        this.remove();
    }
});

希望对您有帮助。

附：
使用贪婪量化时要小心 .*

它将获取任何 <; 之间的所有文本。 >，因此，如果您有下面列出的代码，则 regexp (<\/?.*?>) 将收集整个代码。

<div class="container">
    <div id="header">
        <div id="portalLink">
            <a class="genu" href="http://stackexchange.com">Stack Exchange</a>
        </div>
    </div>
</div>

Answer 3

var editableDiv = document.getElementById("MyEditableDiv")
var editableDivImgs = editableDiv.getElementsByTagName("img")
for (var i = 0; i < editableDivImgs.length; i++) {
    if(editableDivImgs[i].className != "safe")
    {
        editableDivImgs[i].parentNode.removeChild(editableDivImgs[i])
    }
}

你尝试过类似的事情吗？

Answer 4

不是删除所有其他元素，而是提取所有 imgs 并将它们连接成一个新字符串：

var regex = /<img.*?>/gmi;
var imgsOnly = '';
var img;
while( ( img = regex.exec(str) ) !== null ) {
    imgsOnly += img;
}
alert( imgsOnly );