javascript - 使用 JavaScript 从 TextArea 中提取所有 h6 标签

Question

这就是我想要做的事情。

1:拥有一个允许用户输入文本的 jQuery WYSIWYG 编辑器
2:有一个框，显示从所见即所得编辑器中提取的文本，该编辑器只能查看。提取的文本应加项目符号。每个项目符号项目应该是所见即所得的标签中包含的任何内容。

示例:

所见即所得编辑器将包含以下文本:

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 中。由你决定。