javascript - 计算字符串中某个数据属性或文本字符串存在的次数，并返回每次出现的次数

Question

我有一个小型 PHP 和 JavaScript 应用程序，cURL 请求 URL 列表，并在该 URL 列表中的任何 URL 返回 404 或 500 状态代码时写入日志文件。

好吧，我想做的是用 JavaScript 计算日志文件中存在的每个 URL 的数量并返回该数字。我想返回一个类似这样的结构:

<ul>
    <li>http://www.example.com  (5)</li>
    <li>http://anothersite.org (19)</li>
    <li>http://www.more.com    (16)</li>
</ul>

在日志文件中，我为每个 URL 条目指定了一个数据属性，如下所示:

<p class="log-text">
    <span data-url="www.examplezz.com">www.examplezz.com - 0 (Timeout)</span> 
    <span data-url="www.examplezz.com/othersite">www.examplezz.com/othersite - 0 (Timeout)</span>
    <span data-url="www.idontexist.io">www.idontexist.io - 0 (Timeout)</span> 
    <span data-url="www.idontexist.io/othersite">www.idontexist.io/othersite - 0 (Timeout)</span> 
</p>
<p class="log-text">
    <span data-url="www.examplezz.com">www.examplezz.com - 0 (Timeout)</span> 
    <span data-url="www.examplezz.com/othersite">www.examplezz.com/othersite - 0 (Timeout)</span>
    <span data-url="www.idontexist.io">www.idontexist.io - 0 (Timeout)</span> 
    <span data-url="www.idontexist.io/othersite">www.idontexist.io/othersite - 0 (Timeout)</span>
</p>
<p class="log-text">
    <span data-url="www.examplezz.com">www.examplezz.com - 0 (Timeout)</span> 
</p>

日志文件是通过ajax获取的，我将它作为字符串获取。这是一个带有“for”循环的 JS Bin，我一直在尝试使用:

JSBin

其他信息:这是我的 ajax 请求的样子，不确定是否有帮助。

var overLoad = function (){
    $.ajax({  
    type: 'POST',  
    url: 'includes/logfiles/'+logfilename+'.php',
    data: $('.log-text'),
    statusCode: {
      404: function() {
        $("<p class='intro log-text eventNum' style='margin-bottom:0;'>Is your internet connection intact?</p>").appendTo(".overview-popup");
      }
    }   
    }).done(function (data) {

            // here I want to count the urls in the 'data' string

     }).fail(function (jqXHR, statusCode) {
      $("<p class='intro log-text eventNum' style='margin-bottom:0;'>No offline events!</p>").appendTo(".overview-popup");
    });
};

Answer 1

当 DOM 触手可及时，为什么要尝试进行字符串操作？

var div = document.createElement('div');
div.innerHTML = data;
var elements = div.querySelectorAll('[data-url]');
var urls = {};

for(var i = 0; i < elements.length; i++) {
    var url = elements[i].getAttribute('data-url');

    if(!(url in urls)) {
        urls[url] = 0;
    }

    urls[url]++;
}

console.log(urls);

http://jsbin.com/adEBiCU/3/edit

我将按主机名(而不仅仅是 URL)分组留给您作为练习。提示:使用 DOM(双重提示:<a> 有一个 host 属性)。

编辑:我错过了您已经在使用 jQuery。

var data ='<p class="log-title">not available. <span class="stamp"><span >Pinged: </span>Wednesday 1st of January 2014 03:57:03 PM</span></p><p class="log-text"><span data-url="www.examplezz.com">www.examplezz.com - 0 (Timeout)</span><br /><span data-url="www.examplezz.com/othersite">www.examplezz.com/othersite - 0 (Timeout)</span><br /><span data-url="www.idontexist.io">www.idontexist.io - 0 (Timeout)</span><br /><span data-url="www.idontexist.io/othersite">www.idontexist.io/othersite - 0 (Timeout)</span><br /></p>';

var urls = $(data).find('[data-url]').map(function() {
    var url = $(this).attr('data-url');
    return $('<a>', {href: 'http://' + url})[0].host;
}).get().reduce(function(urls, b) {
        if(!(b in urls)) {
    urls[b] = 0;
    }

    urls[b]++;

    return urls;
}, {});


console.log(urls);

http://jsbin.com/adEBiCU/5/edit