Javascript - 解析 html 字符串获取具有类 X 的每个元素并返回它们的数组

Posted

技术标签:

【中文标题】Javascript - 解析 html 字符串获取具有类 X 的每个元素并返回它们的数组【英文标题】:Javascript - parse html string get each element with class X and return array of them 【发布时间】:2013-10-04 19:05:59 【问题描述】:

您好,我需要使用纯 javascript(无 jquery)将大量元素文本内容放入 json 中,然后将它们放入 json 数组中。

例如来自:

<li class="asd">1</li>
<li class="asd">2</li>
<li class="asd">3</li>
<li class="asd">4</li>
<li class="asd">5</li>
<li class="asd">6</li>
<li>no</li>
<li>no</li>
<li>no</li>
<li>no</li>

我需要返回:

[1,2,3,4,5,6]

例如,一旦我获得了 html 页面字符串,我通过 XHR 获得了一个 html 页面内容,我如何解析它并将所有带有 class="asd" 的元素放入一个 json 数组中?

这里是我获取 html 字符串的地方:

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() 
        if (xhr.readyState == 4) 
            alert(xhr.responseText);
//here i don't know how to parse the html returned :( and put it into a json array
        
    
    xhr.open('GET', 'http://site.com/htmlpagecontent.html', true);
    xhr.send(null);

【问题讨论】:

【参考方案1】:

您可以通过创建一个虚拟 DOM 元素并将您的 html 字符串注入该元素来实现。这将创建相应的节点层次结构,您可以使用getElementsByClassName 进行过滤:

var div = document.createElement("div");
div.innerHTML = xhr.responseText;
var nodes = div.getElementsByClassName("asd");
var array = [];
for(var i=0; i<nodes.length; i++)  array.push(nodes[i].innerHTML); 

【讨论】:

以上是关于Javascript - 解析 html 字符串获取具有类 X 的每个元素并返回它们的数组的主要内容,如果未能解决你的问题,请参考以下文章

Javascript - 解析 html 字符串获取具有类 X 的每个元素并返回它们的数组

CSS的三种定位,深度解析,值得收藏

html 问Ben:使用Javascript Exec()正则表达式命令解析CSV字符串

parseInt() 函数的奇怪行为

JavaScript 中的 DOM 解析

JavaScript中一个字符串变量突然变成了false的问题解析