Question

我需要使用正则表达式或其他内容删除contentEditable div中的所有代码，但要将img标记与特定class或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

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

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

例如：

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

希望它对你有所帮助。

P.S .: 使用贪婪量化时要小心.*

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

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

Answer 2

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

删除除img标记以外的所有标记

4 个答案: