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

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.

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

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 3

In jQuery you may select them with

h6s = $( #wysiwyg h6 );

Answer 4

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.

友情链接