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

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

如果你一遍又一遍地这样做，你将要重复使用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.
}

自行承担风险，do not use regex to parse HTML！

编辑：噢，我错过了jQuery篇。继续使用提出的jQuery解决方案，它会好得多：）

Answer 3

在jQuery中，您可以使用

选择它们

h6s = $('#wysiwyg h6');

Answer 4

您可以创建一个不可见的DIV，将HTML放入innerHTML属性，然后以JQuery非常喜欢的方式查询h6。我不会说JQuery，但它应该读取类似$("h6")的内容，当然，这要求您的HTML输入有效。

使用JavaScript从TextArea中提取所有h6标记

4 个答案: