使用JavaScript從TextArea中提取所有h6標籤

以下是我期待的功能。使用JavaScript從TextArea中提取所有h6標籤

1：有一個jQuery的所見即所得的編輯器，允許用戶輸入文字
2：有一個顯示提取從所見即所得的編輯器，這只是可見的文本框中。提取的文本應該是項目符號。每個項目符號應該是所見即所得中標籤中包含的任何項目。

實施例：

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普魯斯
- 保護者convallis suscipit蚤等venenatis

感謝您的幫助！

來源

2009-12-08 AnApprentice

您可以重新格式化您的文章請使用代碼塊爲您的wysiwyg輸入？除非被轉義，否則StackOverflow會剔除''。 – Kenaniah 2009-12-08 00:35:50

靈感禮貌佩卡的：

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，否則每次使用它時都要使用它，以防止漏到所有地方的DOM對象:)

哦，您可能想使用.html()而不是.text()用於將h6的內容轉換爲li的內容。由你決定。

來源

2009-12-08 01:04:08 hobbs

hobbs，感謝您的靈感。我一直在玩這個，並沒有能夠得到端到端。說實話，我並不完全理解邏輯背後的天才。你能通過給出一個使用下面的代碼的工作示例來幫助我嗎？謝謝 – AnApprentice 2009-12-08 03:37:10

這裏有一些工作代碼 - 我不會說這是很好的代碼，但它的工作原理。爲了簡單起見，我離開了WYSIWIG編輯器。 http://cleverdomain.org/summarizer.html - 只需在文本框中輸入一些HTML，其中包含一些h6標籤。 – hobbs 2009-12-08 06:23:30

非常感謝 – AnApprentice 2009-12-08 16:00:27

在jQuery中你可能會

h6s = $('#wysiwyg h6');

來源

2009-12-08 00:40:24

剛剛嘗試過... CODE： \t h6s = $（'＃markItUp h6'）; \t $（'＃blahblah'）。html（h6s）; \t alert（h6s）; \t return false; 這似乎不工作。我需要通過h6s var以某種方式循環嗎？謝謝 – AnApprentice 2009-12-08 03:42:42

是的，jQuery返回一個類似數組的結構。 – 2009-12-08 04:52:55

選擇其中你可以創建一個不可見DIV，把HTML到innerHTML屬性，然後在jQuery是愛的方式查詢H6的。我不會說JQuery，但它應該讀取類似於$("h6")的東西，當然，這要求您的HTML輸入有效。

來源

2009-12-08 00:41:31

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！

編輯：d'oh，我錯過了jQuery片。來吧所提出的jQuery的解決方案，它是更好:)

來源

2009-12-08 00:53:02 BalusC

使用JavaScript從TextArea中提取所有h6標籤

回答

相關問題