解析 html 的结构/层次结构，并使用 javascript 以不同的形式重新创建它

Parsing structure/hierarchy of html and recreating it in a different form with javascript

本文关键字：新创建 创建 层次结构 结构 html javascript 解析      更新时间：2023-09-26

我正在尝试使用javascript抓取一些网页，以收集有关内容层次结构的信息。我正在使用 casperjs 进行爬行，到目前为止工作正常。

我要解析的信息结构如下：

<ul>
    <a></a>
    <li>
        <h3>
            <a>
                Category
                <span>Description for Category</span>
            </a>
        </h3>
        <div>
            <ul>
                <li>
                    <a>SubCategory</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

但我想得到的是这个。

<ul>
    <li>Category
        <ul>
            <li>SubCategory</li>
        </ul>
    </li>
</ul>

我想在不同的网页中使用上面的html，所以基本上我会从casperjs将其写入文件，以便我可以将其复制粘贴到另一个文档中。我正在爬行，因为手动执行是一件乏味的事情(90 个页面和每页大量数据(。

解构/解析层次结构，然后重新创建它的最佳方法是什么？留在 DOM 并使用 JQuery 进行重组？把它拉成树形结构，以后再重建？

请注意，这是一个特定的解决方案，仅适用于您提供的特定代码布局：

我在jQuery中创建了一个解析器，它在文本区域中接收HTML标记并将其转换为您正在使用的格式：

$(function(){
    $("button").click(function(){
        //Read in HTML
        $("#parser").html($("textarea").val());
        //Parse
        var categories = $("#parser > ul").find("li h3 a");
        $(categories).find("span").remove();
        //Output result
        var output = "&lt;ul&gt;'n";
        for(var i = 0; i < categories.length; i++)
        {
             //Get subcategories for this category
             var subCategories = $($(categories[i])).closest("h3").siblings("div").find("ul li a");
             //Add markup to output
             output += "'t&lt;li&gt;" + minimize($($(categories[i])).html()) + "'n't't&lt;ul&gt;'n";
             for(var j = 0; j < subCategories.length; j++)
             {
                 output += "'t't't&lt;li&gt;"+$($(subCategories[j])).html() + "&lt/li&gt;'n"
             }
            output += "'t't&lt;/ul&gt;'n't&lt;/li&gt;'n&lt;/ul&gt;'n"
        }
        $("#result").html(output);
    });
});
//Removes all white-space characters from the string.
function minimize(str)
{
    return str.replace(/'s{2,}/g, '');
}

JSFiddle

这是很多工作，并且非常定制。正如我之前所说，如果您查看此处使用的不同选择器，则此代码非常适合此特定代码布局。

例：

var categories = $("#parser > ul").find("li h3 a");

这在解析器下方查找一个 ul 元素，该元素包含 <a>s 内部<h3>s 内部<li>s以查找类别，然后稍后使用

$($(categories[i])).closest("h3").siblings("div").find("ul li a");
查找具有兄弟

姐妹<div>和孩子的<a>类别<h3> <ul><li><a></a></li></ul>

因此，如果格式不是这样：

<ul>
    <li>
        <h3>
            <a>Category</a>
        </h3>
        <div>
            <ul>
                <li>
                    <a>Subcategory</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

这是行不通的。

我最终采用了这种方法：

  1. 从现有网站中抓取标签，并将它们组合成一个数组嵌套的javascript对象。
  2. 使用 JSON.stringify 将它们写出到文件中
  3. 将它们作为 Javascript 对象加载到新页面中，并使用遍历 javascript 对象的递归函数构建 ul/li 结构。

我发现很难像修改其他答案一样修改 DOM。更容易将其分解为多个步骤，中间有一个结构良好的javascript对象。

相关文章：