【问题标题】:JavaScript: How to create nested array from stringJavaScript:如何从字符串创建嵌套数组
【发布时间】:2017-01-06 22:42:42
【问题描述】:

我有以下代码,我需要创建一个嵌套数组,从中我将生成一个多级有序列表。

var htmlContent2 = '<div id="header"><p class="headpara">Header content</p><p class="one">Lorem ipsum dolor sit amet, consectetur:</p><p class="two">Perferendis iure doloremque iusto adipisci facilis.</p><p class="two">Asperiores impedit officiis cumque molestias at rerum consequuntur!</p><p class="one">More dummy text.</p> <p class="two">Additional dummy text: </p> <p class="three">Asperiores impedit officiis.</p> <p class="three">Lolestiae asperiores ad repellat est obcaecati.</p> <p class="two">Lorem ipsum dolor sit amet.</p> <p class="notelem">Dignissimos maiores facere consequuntur quod.</p> <p class="one">Ea  excepturi aperiam.</p></div>';

var $ = cheerio.load(htmlContent2);
var allList = [];
var manipulatedContent = $('#header').each(function (i, elem) {
    var level1 = [],
        level2 = [],
        level3 = [],
        level4 = [],        
        item1 = $('.one').html(),
        item2 = $('.two').html(),
        item3 = $('.three').html(),
        item4 = $('.notelem').html();
    level1[i] = item1;
    level2[i] = item2;
    level3[i] = item3;
    level4[i] = item4;
    allList.push(item1, [item2, [item3, item4]]);

});
console.dir(allList);

使用我当前的代码,我只能生成以下数组:

[ 'Lorem ipsum dolor sit amet, consectetur:',
  [ 'Perferendis iure doloremque iusto adipisci facilis.',
    [ 'Asperiores impedit officiis.',
            'Dignissimos maiores facere consequuntur quod.']]]

但是想要的结果数组:

['Lorem ipsum dolor sit amet, consectetur:',
    ['Perferendis iure doloremque iusto adipisci facilis.',
        ['Asperiores impedit officiis.',
            ['Dignissimos maiores facere consequuntur quod.']]]];

我怎样才能使用 JavaScript 或任何更好的方法通过 Cheerio.js 实现这一目标?

我的目标是从格式不佳的 html 创建一个嵌套的有序列表,如示例内容 (htmlContent2) 所示。

非常感谢您的帮助。

【问题讨论】:

  • 看起来您只需将allList.push(item1, [item2, [item3, item4]]); 更改为allList.push(item1, [item2, [item3, [item4]]]);
  • 当我使用上面的代码时,结果内容并不是我所需要的。我得到以下信息: ['Lorem ipsum dolor sit amet, consectetur:', ['Perferendis iure doloremque iusto adipisci facilis.', ['Asperiores impedit officiis.', [Object] ] ] 我正在使用cheerio.js 生成嵌套数组。
  • 对我来说很好。请参阅切斯特的答案以证明它有效。
  • 我将尝试使用常规 jQuery,目前我正在使用cheerio.js 生成数组。在像这样 [Object] ] ] ] 这样的最后一个元素输出中,而不是内容。
  • 这只是console.dir() 生成的输出,它显然会在一定深度处停止,以避免复杂对象的大量输出。实际对象确实包含您需要的数据结构。

标签: javascript html arrays multidimensional-array cheerio


【解决方案1】:

正如@Chris G 评论的那样:

//var htmlContent2 = '';
//var $ = cheerio.load(htmlContent2);
var allList = [];
var manipulatedContent = $('#header').each(function (i, elem) {
    var level1 = [],
        level2 = [],
        level3 = [],
        level4 = [],        
        item1 = $('.one').html(),
        item2 = $('.two').html(),
        item3 = $('.three').html(),
        item4 = $('.notelem').html();
    level1[i] = item1;
    level2[i] = item2;
    level3[i] = item3;
    level4[i] = item4;
    allList.push(item1, [item2, [item3, [item4]]]);

});
console.dir(allList);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"><p class="headpara">Header content</p><p class="one">Lorem ipsum dolor sit amet, consectetur:</p><p class="two">Perferendis iure doloremque iusto adipisci facilis.</p><p class="two">Asperiores impedit officiis cumque molestias at rerum consequuntur!</p><p class="one">More dummy text.</p> <p class="two">Additional dummy text: </p> <p class="three">Asperiores impedit officiis.</p> <p class="three">Lolestiae asperiores ad repellat est obcaecati.</p> <p class="two">Lorem ipsum dolor sit amet.</p> <p class="notelem">Dignissimos maiores facere consequuntur quod.</p> <p class="one">Ea  excepturi aperiam.</p></div>

【讨论】:

  • 您好 Chester,生成的数组似乎无效。
  • @Manou,不确定您的意思?它与您在问题中包含的预期结果相同。
  • 我刚刚再次检查,它实际上工作正常。感谢您的帮助。
猜你喜欢
  • 2021-08-22
  • 2019-07-07
  • 1970-01-01
  • 2018-06-25
  • 1970-01-01
  • 1970-01-01
  • 2019-02-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多