Как в Jquery удалить вложенные теги в определенных тегах, но сохранить текст и картинки, находящийся в глубине?

Question

[EVOSandru6]

Добрый день,

Есть тег div с классом .editor, внутри которого осуществляется чистка:

Сначала удаляю теги style, если тег - не картинка

Вложенность вложенных ненужных тегов может варьироватся (Как сгенерирует визуальный редактор, который нужен только для загрузки и позиционирования картинки в тексте).

Интересует как из:

<div class="editor">
	<p>
		<img style="float:left">
		<p>
			<span>
				<font>
					Текст 1
				</font>
			</span>
		</p>
	</p>
	<p>
		<p>
		<img style="float:left">
			<span>
				<font>
					Текст 3
				</font>
			</span>
		</p>
	</p>
	<ul>
		<li>
			<span>
				<font>
					<p>Текст 3</p>
				</font>
			</span>
		</li>
		<li>
			<font>
				<p>Текст 4</p>
			</font>
		</li>
	</ul>
</div>

Получить вот это:

<div class="editor">
	<p>
		<img style="float:left">
		Текст 1
	</p>
	</p>
	<p>
	<p>
		<img style="float:left">
		Текст 2
	</p>
	</p>
	<ul>
		<li>
			Текст 3
		</li>
		<li>
			Текст 4
		</li>
	</ul>
</div>

Т.е. надо чистить все:

$('.editor > p')
$('.editor > ul > li')
$('.editor > h[1-6]')

При этом важно, чтобы картинки, на каком бы уровне вложенности они не были, не удалялись.

Может еще кто-то чистил результат визуальных редакторов?)

Answer 1

[Zhainar]

var html = $('.editor').html();
html.replace(/регулярное выражение для ненужных тегов/, '');
$('.editor').html(html);

$('.editor > *').each( function(){
  var images = $(this).find('img').detach();
  var text = $(this).text();
  $(this).html( text ).prepend( images );
});

Comments

[EVOSandru6]

Благодарю, нашел вот такое выражение: (/<\/?[^>]+>/g,'')); , но оно распространяется на все теги, а как сделать чтобы на span и font только?

[Zhainar]

EVOSandru6: /<\/?(font|span)[^>]*>/g

[EVOSandru6]

Zhainar: Благодарю!