0

私が持っていると言う

var string = 
"<h1>Header</h1>
<p>this is a small paragraph</p>
<ul>
    <li>list element 1.</li>
    <li>list element 2.</li>
    <li>list element 3. With a small update.</li>
</ul>"
//newlines for clarity only

javascriptを使用してこの文字列を分割するにはどうすればよいですか

var array = string.split(/*...something here*/)

array = [
"<h1>Header</h1>",
"<p>this is a small paragraph</p>",
"<ul><li>list element 1.</li><li>list element 2.</li><li>list element 3. With a small update.</li></ul>"
]

子ではなく、上位のhtml要素のみを分割したい。

4

3 に答える 3

3

次のようなことができます。

var string = '<div><p></p></div><h1></h1>';
var elements = $(string).map(function() {
    return $('<div>').append(this).html();  // Basically `.outerHTML()`
});

そして結果：

["<h1>Header</h1>", "<p>this is a small paragraph</p>", "<ul>    <li>list element 1.</li>    <li>list element 2.</li>    <li>list element 3. With a small update.</li></ul>"]
于 2013-04-18T19:52:31.763 に答える
2

パフォーマンスの高いソリューション ( http://jsperf.com/spliting-html ):

var splitter = document.createElement('div'),
  text = splitter.innerHTML = "<h1>Header</h1>\
<p>this is a small paragraph</p>\
<ul>\
    <li>list element 1.</li>\
    <li>list element 2.</li>\
    <li>list element 3. With a small update.</li>\
</ul>",
  parts = splitter.children,
  part = parts[0].innerHTML;
于 2015-04-09T19:08:06.990 に答える
1

これは正規表現ではできません。同じタイプのネストされた要素がいくつかある場合、正規表現は失敗します。

<div>
  <div>
    <div>
    </div>
  </div>
</div>

これは、正規表現が処理できるのは通常の言語のみであり、HTML は真の文脈自由言語(そして文脈自由言語は通常よりも「複雑」) であるという事実によるものです。

参照: https://stackoverflow.com/a/1732454/2170192

ただし、同じタイプのネストされた要素がない場合は、次の正規表現 (バックリンクを使用) によって返されるすべての一致を取得して、html 文字列を分割できます。

/<(\w+).*<\/\1\s*>/igsm
  • <(\w+)小なり記号といくつかの単語文字 (文字、数字、アンダースコア) に一致し、括弧を介して単語文字をキャプチャします (最初のキャプチャ グループ)。
  • .*要素の内容に一致します。
  • <\/終了タグの開始に一致します。
  • \1は、最初のキャプチャ グループによってキャプチャされた一連のシンボルと正確に一致する後方参照です。
  • \s*>オプションの空白と大なり記号に一致します。
  • igsm修飾子: 大文字と小文字を区別しない、グローバル、ドット マッチ - すべてのシンボル、複数行。
于 2013-04-18T19:56:36.397 に答える