1

我有一个字符串，我想在每个字符串之后将其中断</div> 并插入到数组中。以下是字符串。

"<DIV title='Run of Network' id='525000000'>Run of Network</DIV>
<div title='3dServer11' id='525001499'>3dServer11</div>"

我想过使用split()函数，但由于这不是逗号分隔的字符串，我无法准确理解我应该如何打破字符串并生成一个数组。在数组中，我想要单个 div 条目，例如：

a[0] = <DIV title='Run of Network' id='525000000'>Run of Network</DIV>
a[1] = <div title='3dServer11' id='525001499'>3dServer11</div>"

任何人都可以帮忙吗？提前致谢。

4

3 回答 3

4

我不建议您使用split方法拆分 HTML 字符串或使用正则表达式对其进行解析。使用 DOM 方法操作元素总是更好：

var str = "<DIV title='Run of Network' id='525000000'>Run of Network</DIV>\
           <div title='3dServer11' id='525001499'>3dServer11</div>",
    div = document.createElement("div"),
    arr = [];

div.innerHTML = str;
arr = Array.prototype.slice.call(div.getElementsByTagName("div"));
arr = arr.map(function(e) { return e.outerHTML; });  // to create strings
                                                     // out of DOM elements
console.log(arr);
于 2013-04-19T07:27:39.003 回答
3

尝试 

<div id="container"></div>
<script>
$(document).ready(function () {
    var str = "<div title='Run of Network' id='525000000'>Run of Network</div><div title='3dServer11' id='525001499'>3dServer11</div>";
    $("#container").html(str);
    for (i = 0; i < $("#container").children().length; i++) {
        alert($("#container").children()[i].innerHTML);
    }
});
于 2013-04-19T07:26:01.260 回答
2

更新：

如果您有一个想要执行相同操作的 DOM 元素，请编写一个小型 jQuery 插件：

(function($) {
    $.fn.splitDOMStringsByTag = function( selector ) {
        var resultsArray = [];

        this.find( '> ' + selector).each(function() {
            resultsArray.push( $(this)[0].outerHTML.replace( /[\s\n\r]+/g, ' ' ) );
        });

        return resultsArray;
    };
})( jQuery );

这是如何工作的：

假设你有以下 DOM 

<ul id="abc">
    <li>One </li>
    <li>Two </li>
    <li>Three </li>
    <li>Three 
        <ul>
            <li>Three point five</li>
        </ul>
    </li>
    <li>Four </li>
</ul>

然后，您将执行以下操作： 

var myArray = $('#abc').splitDOMStringsByTag('li');

并得到以下输出 

myArray; // console
["<li>One </li>", "<li>Two </li>", "<li>Three </li>", "<li>Three <ul> <li>Three point five</li> </ul> </li>", "<li>Four </li>"]

myArray[3] // console
"<li>Three <ul> <li>Three point five</li> </ul> </li>"

使用普通 JS 的旧答案

var ipt = "<DIV title='Run of Network' id='525000000'>Run of Network</DIV><div title='3dServer11' id='525001499'>3dServer11</div>",
    dummyDiv = document.createElement("div"),
    divList = [],
    a = [];

dummyDiv.innerHTML = ipt;
divList = Array.prototype.slice.call(dummyDiv.getElementsByTagName("div"));

for (var i = 0; i < divList.length; i++) {
    a.push(divList[i]);
}

这会给你你想要a的

a[0] = <DIV title='Run of Network' id='525000000'>Run of Network</DIV>
a[1] = <div title='3dServer11' id='525001499'>3dServer11</div>

要获取字符串，只需使用a[0].outerHTML

a[0].outerHTML;

// Console Output
"<div title="Run of Network" id="525000000">Run of Network</div>"
于 2013-04-19T07:55:36.213 回答