Удалить все теги, кроме тега img

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

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) : Возможно, лучший способ - собрать все элементы, а затем проверить их класс / идентификатор и выполнить действие.Хорошая идея - использовать DOM, а не регулярное выражение.DOM предназначен для манипулирования элементами HTML.

(или используйте jQuery) : простой код может сделать это.Просто соберите всех детей div и проверьте их класс в цикле .each ();

Например:

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

Надеюсь, это поможет вам.

PS: будьте осторожны, когдавы используете жадное количественное выражение .*

Он будет получать весь текст между любыми < >, поэтому, если у вас есть код, указанный ниже, регулярное выражение (<\/?.*?>) будет собирать весь код.

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

Answer 3

Вместо удаления всех других элементов извлеките все imgs и объедините их в новую строку:

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

Answer 4

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])
    }
}

ты пробовал что-то подобное?