Extract all h6 tags from a TextArea using JavaScript

Question

Here is what I'm looking to do.

1: Have a jQuery WYSIWYG editor that allows users to enter text
2: Have a box that displays extracted text from the WYSIWYG editor that is only viewable. The extracted text should be bulleted. Each bullet item should be anything that is contained in an tag in the WYSIWYG.

Example:

WYSIWYG editor would contain the following text:

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.

The view only box below would then show:
- Ut eget purus
- Maecenas convallis suscipit magna et venenatis

Thanks for the help!

Answer 1

In jQuery you may select them with

h6s = $('#wysiwyg h6');

Answer 2

You could create an invisible DIV, put the HTML into the innerHTML property and then query for h6's in the way that JQuery is so loved for. I don't speak JQuery but it should read something like $("h6") that, of course, requires that your HTML input is valid.

Answer 3

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.
}

Use on own risk, do not use regex to parse HTML!

Edit: d'oh, I missed the jQuery piece. Go ahead with the proposed jQuery solution, it is much better :)

Answer 4

Inspiration courtesy of Pekka:

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

If you're doing this over and over, you're going to want to reuse bulletList, and you're going to want to either reuse editorContents, or else .remove() it each time you're done with it, to keep from leaking DOM objects all over the place :)

Oh, and you might want to use .html() instead of .text() for transferring the contents of the h6's into the li's. Up to you.