Question

我在jquery get请求中将jtml字符串（var jsonHtmlString）作为json返回，并且需要使用下面的信息解析html以返回对象数组。可能有一种简单的方法可以做到这一点，但我一直无法找到它。我希望有人可以推荐一个“简单的解析”解决方案（如果你使用在线工具（例如plnkr.co）在测试你的js代码时轻松看到解析）？

我已经包含了jQuery选择器值应该在映射对象的每一行上返回的内容。谢谢！

execute as login = 'that_login';

select distinct name, type
from sys.login_token
where principal_id > 0
      and type in ('WINDOWS LOGIN', 'WINDOWS GROUP');

revert;

Answer 1

jQuery可以在给定一大块HTML的情况下构造一个jQuery对象。像这样$('<whatever>Stuff</whatever>');

我将您的HTML字符串包装在div中，以便您现有的代码或多或少地无需修改即可运行。将jQuery对象导入element后，您的代码几乎是正确的。

  let items = parseHtml('<div>' + jsonHtmlString + '</div>');    
  function parseHtml(html) {
    let element = $(html);
    var items = element.find('div.search-result-srch'); // array of object for each div class="search-result-srchbox" 
    let map = items.map((index, item) => {
      return {
        title: $(item).find('a').text(), // The Continuous Learning..., Business Case for...
        description: $(item).find('.description').text(), // This report introduces..., This editable PowerPoint...
        practice: $(item).find('.col1-b').text(), // Tools & Technology, Learning & Development
        subject: $(item).find('.col2-b').text(), // Learning Tech, Informal Learning
        access: $(item).find('.pracsub .col2-b').text(), // Member, Complimentary
        publishDate: $(item).find('.pracsub .col2-b').text(), // 09/02/2015, 08/26/2015
        type: $(item).find('.pracsub .col1-b:last-of-type').text(), // Research Report, Performance Support
      }
    });

    return $.makeArray(map);
  }

您在上面的评论中提到了

为什么在迭代地图循环中的每个项目时需要引用$（item）？

来自jQuery的map文档：

类型：函数（整数索引，元素domElement）=＆gt;宾语将为当前集合中的每个元素调用的函数对象。

请注意，该元素是 DOM 元素，而不是jQuery对象。所以我们需要调用$（item）将它包装为jQuery对象。

Answer 2

jQuery已经有了parseHTML方法。您只需要运行它，然后正确地映射结果。以下示例：

var jsonHtmlString = `<div class="search-result-srch box"> <span class="number">1.</span>
<a href="/Practice/Detail.aspx?docid=18600&mode=search&p=Tools-@-Technology">The Continuous Learning Technology Stack: Thinking outside the LMS</a>
<br />
<div title="Research Report" class="description rr">This report introduces the Continuous Learning Technology Stack, or the sum of technologies that can be leveraged for enabling continuous learning within organizations. </div>
<div class="pracsub"> <span class="col1-a">Practice:</span> <span class="col1-b"><strong>Tools & Technology</strong></span> <span class="col2-a">Subject:</span> <span class="col2-b"><strong>Learning Tech</strong></span> </div>
<div class="pracsub top-blue-brdr"> <span class="col1-a">Access:</span> <span class="col1-b">Member</span> <span class="col2-a">Published:</span> <span class="col2-b">09/02/2015</span>
    <div class="clearfix"></div> <span class="col1-a">Type:</span> <span class="col1-b">Research Report</span> </div>
<div class="clearfix"></div>
</div>
<div class="search-result-srch box"> <span class="number">2.</span>
<a href="/Practice/Detail.aspx?docid=18817&mode=search&p=Learning-@-Development">Business Case for Investing Beyond the LMS (editable PPT)</a>
<br />
<div title="Performance Support" class="description ps">This editable PowerPoint template guides you through the process of building and presenting a business case for investing in continuous learning—beyond the LMS.</div>
<div class="pracsub"> <span class="col1-a">Practice:</span> <span class="col1-b"><strong>Learning & Development</strong></span> <span class="col2-a">Subject:</span> <span class="col2-b"><strong>Informal Learning</strong></span> </div>
<div class="pracsub top-blue-brdr"> <span class="col1-a">Access:</span> <span class="col1-b">Complimentary</span> <span class="col2-a">Published:</span> <span class="col2-b">08/26/2015</span>
    <div class="clearfix"></div> <span class="col1-a">Type:</span> <span class="col1-b">Performance Support</span> </div>
<div class="clearfix"></div>
</div>`;

var htmled = $.parseHTML(jsonHtmlString);

var listOfObjects = htmled.map(item => {
  if ($(item).hasClass('search-result-srch')) {
    return {
      title: $(item).find('a').text(), // The Continuous Learning..., Business Case for...
      description: $(item).find('.description').text(), // This report introduces..., This editable PowerPoint...
      practice: $(item).find('.col1-b').text(), // Tools & Technology, Learning & Development
      subject: $(item).find('.col2-b').text(), // Learning Tech, Informal Learning
      access: $(item).find('.pracsub .col2-b').text(), // Member, Complimentary
    publishDate: $(item).find('.pracsub .col2-b').text(), // 09/02/2015, 08/26/2015
      type: $(item).find('.pracsub .col1-b:last-of-type').text(), // Research Report, Performance Support
    };
  }
});

jQuery - html字符串“轻松解析”的好解决方案

2 个答案: