Извлеките все теги h6 из TextArea, используя JavaScript

Question

Вот что я хочу сделать.

1: есть редактор jQuery WYSIWYG, который позволяет пользователям вводить текст
2: Имейте поле, которое отображает извлеченный текст из редактора WYSIWYG, который доступен только для просмотра. Извлеченный текст должен быть маркирован. Каждый элемент маркера должен быть чем-либо, что содержится в теге в WYSIWYG.

Пример:

Редактор WYSIWYG будет содержать следующий текст:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut ipsum eget
enim porttitor pretium. <h6>Ut eget purus.</h6> In nisi congue accumsan. Nulla
mattis nisl at dui porta non lacinia nulla condimentum. <h6>Maecenas convallis
suscipit magna et venenatis.</h6> Phasellus a justo sed mauris hendrerit porttitor.

В приведенном ниже поле только для просмотра будет показано:
- Ut eget purus
- Maecenas convallis suscipit magna et venenatis

Спасибо за помощь!

Answer 1

Вдохновение от Пекки:

var editorContents = $('<div/>');          // Inject the stuff from the textbox
editorContents.html( $('#editor').val() ); // into the DOM.

// Adjust to taste -- this is where we're putting the info we extract.
var bulletList = $('<ul/>').class('whatever').appendTo('wherever');

// Now just find the headings and put their contents into bullet points.
$('h6', editorContents).each( function (i) {
  $('<li/>').text( this.text() ).appendTo(bulletList);
} );

Если вы делаете это снова и снова, вам захочется повторно использовать bulletList, и вы захотите либо повторно использовать editorContents, либо .remove() каждый раз, когда вы закончите, чтобы не допустить утечки DOM-объектов повсюду:)

О, и вы можете использовать .html() вместо .text() для переноса содержимого h6 в li. До вас.

Answer 2

var text = 'foo <h6>head1</h6> bar <h6>head2</h6> waa';
var regex = /\<h6.*?\>(.*?)\<\/h6\>/g;
var match = null;
while (match = regex.exec(text)) {
    alert(match[1]); // head1, head2.
}

Используйте на свой страх и риск, не используйте регулярные выражения для разбора HTML !

Редактировать : О, я пропустил кусок jQuery. Продолжайте с предложенным решением jQuery, это намного лучше:)

Answer 3

Вы можете создать невидимый DIV, поместить HTML-код в свойство innerHTML и затем запросить h6 так, как JQuery так любят. Я не говорю на JQuery, но он должен читать что-то вроде $("h6"), что, конечно, требует правильности ввода HTML.

Answer 4

В jQuery вы можете выбрать их с помощью

h6s = $('#wysiwyg h6');