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

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

我已经包括jQuery选择器值应该在映射对象的每一行上返回什么。谢谢！

var jsonHtmlString = '<div class="search-result-srch box"> <span class="number">1.</span> 
    <a href="/Practice/Detail.aspx?docid=18600&mode=search&[email protected]">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&[email protected]">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 items = parseHtml(jsonHtmlString); 

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

来源

2017-06-06 lance-p

当你说“解析”时，你是否试图做这样的事情？ https://plnkr.co/edit/dRugzmUOXiBGiiDpwoNP?p=preview – aquinas

这正是我的意思！谢谢。我错过了.find参考。一个问题，但。在你选择了items数组的地方，var items = element.find（'div.search-result-srch'）不是已经在jquery中“包装”的项目（因为在初始选择器中使用了$对象，让元素= $（html））。那么为什么在迭代地图循环中的每个项目时需要引用$（item）？（而不是只使用item.find（））？另外，你是否想把你的答案链接到答案中，这样我就可以将它标记出来？ –

jQuery可以构造一个jQuery对象给定一个HTML块。像这样$('<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); 
    }

你问上面

评论那么，为什么你需要参考$（项目）在地图上循环遍历每个项目的时候？

从jQuery的文档为map：

类型：函数（整数索引，元一个DOMElement）=>对象将被调用的在当前组中的每个元素的函数的对象。

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

来源

2017-06-06 21:09:57 aquinas

感谢您的帮助解释。 –

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

var jsonHtmlString = `<div class="search-result-srch box"> <span class="number">1.</span> 
<a href="/Practice/Detail.aspx?docid=18600&mode=search&[email protected]">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&[email protected]">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 
    }; 
    } 
});

来源

2017-06-06 20:26:17 ricas07

我正在使用jquery的旧版本，它不包含parseHtml。阿奎那回答我所需要的作品，但他没有把它作为答案。谢谢。 –

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

回答

相关问题