使用 JQuery 将 Yahoo 联系人表转换为 CSV 文件的书签

Question

不再像以前那样使用雅虎邮箱将 Facebook 好友导出到 Twitter 或 Google+ - http://lifehacker.com/5824769/how-to-migrate-all-your-facebook-data-to-google%252B 雅虎现在（可能是由 Facebook 强制）标记所有导入的 Facebook 朋友，因此您不能将它们导出。 我想找到一种将 Yahoo 联系人转换为 CSV 文件（包括 Facebook 联系人）的方法，并认为最好的方法是将简单的打印视图（参见 https://dl.dropbox.com/u/95261/CloudShot/shot_21062012_153052.png）转换为 CSV 文件。

理想情况下，我会使用 Bookmarklet，并认为我可以使用类似于 Table2CSV 的插件- http://www.kunalbabre.com/projects/table2CSV.php

我创建了以下书签作为测试：

javascript:;var s=document.createElement('script'); s.setAttribute('src','http://jquery.com/src/jquery-latest.js'); document.getElementsByTagName('body')[0].appendChild(s); s.setAttribute('type', 'text/javascript'); var t=document.createElement('script'); t.setAttribute('src','http://www.kunalbabre.com/projects/table2CSV.js'); document.getElementsByTagName('body')[0].appendChild(t); t.setAttribute('type', 'text/javascript'); $('qprintable').table2CSV();

这不起作用，因为 Yahoo 打印联系人中的表格将每个联系人放在单独的表格中。我这里有一个示例（我已经更改了细节以保护隐私！）- http://pastebin.com/STuKmwQa

理想情况下，我可以以 CSV 格式下载或复制和粘贴。我想使用一个书签，因为我希望这对最终用户来说很容易，并希望这将使所有目前无法轻松导出其 Facebook 联系人的人受益。

我如何做到这一点？

Answer 1

http://jsfiddle.net/GMmdg/5/

一般选择器格式：

xtract('table.container-of-inner-tables table.child-tables');

jsfiddle 的具体选择器，但它可能不适用于实际页面：

xtract('body > table > tbody > tr:not(.qprintfoot) table');

数据提取器功能，必要时更改内部选择器：

function xtract( rootTableSelector ){
    var rows = [];
    var csv = [];
    $( rootTableSelector ).each(function(){
        var $t = $(this);
        var row = {};
        row.name  = $.trim( $t.find('tr:nth-child(1) > td > b').text());
        row.email = $.trim( $t.find('tr:nth-child(2) > td > div:nth-child(2)').text());
        rows.push( row );
        csv.push([ row.name, row.email ]);
    });
    console.log( rows );
    $('#result').text( toCSV( csv ) );
    $('#json').text( JSON.stringify( rows) );
    // prompt('this is not csv', csv );
}

创建 csv 的未经测试、新编写的函数，享受选项：

function toCSV( rows ){
    var newline = '\n';
    var fsep = ','; // field separator
    var quot = '"'; // field quoter
    var quotquot = [ quot + quot, '\\' + quot ][1]; // choose
    var alwaysQuote = false;
    var quoteIfContainsQuote = true;
    // omitted option possibilities:
    // - trimFields
    // - quoteStringsButNotNumbers(excel)
    // - putEqualSignBeforeNumbers(excel), etc.

    var lines = [];
    $.each( rows, function(){
      var line = [];
      $.each( this, function(){
          var s = this;
          var needsQuote = alwaysQuote;

          if( s.indexOf( fsep ) >= 0 )
              needsQuote = true;

          if( s.indexOf( quot ) >= 0 ){
              needsQuote = needsQuote || quoteIfContainsQuote;
              s = s.replace( quot, quotquot );
          }

          if( needsQuote ) s = quot + s + quot;
          line.push( s );
      });
      lines.push( line.join( fsep ));
    });
    return lines.join( newline );
}

更新，完整的 js http://marijnhaverbeke.nl/uglifyjs/)：

http://pastebin.com/vCuVBUvE

javascript:(function()%7Bfunction%20e(e)%7Bvar%20t%3D%22%5Cn%22%2Cn%3D%22%2C%22%2Cr%3D'%22'%2Ci%3D%5Br%2Br%2C%22%5C%5C%22%2Br%5D%5B1%5D%2Cs%3D!1%2Co%3D!0%2Cu%3D%5B%5D%3Breturn%20%24.each(e%2Cfunction()%7Bvar%20e%3D%5B%5D%3B%24.each(this%2Cfunction()%7Bvar%20t%3Dthis%2Cu%3Ds%3Bt.indexOf(n)%3E%3D0%26%26(u%3D!0)%2Ct.indexOf(r)%3E%3D0%26%26(u%3Du%7C%7Co%2Ct%3Dt.replace(r%2Ci))%2Cu%26%26(t%3Dr%2Bt%2Br)%2Ce.push(t)%7D)%2Cu.push(e.join(n))%7D)%2Cu.join(t)%7Dfunction%20t(t)%7Bvar%20n%3D%5B%5D%2Cr%3D%5B%5D%3B%24(t).each(function()%7Bconsole.log(this)%3Bvar%20e%3D%24(this)%2Ct%3D%7B%7D%3Bt.name%3D%24.trim(e.find(%22tr%3Anth-child(1)%20%3E%20td%20%3E%20b%22).text())%2Ct.email%3D%24.trim(e.find(%22tr%3Anth-child(2)%20%3E%20td%20%3E%20div%3Anth-child(2)%22).text())%2Cn.push(t)%2Cr.push(%5Bt.name%2Ct.email%5D)%7D)%2Cr%3De(r)%2Cconsole.log(n)%2C%24(%22body%22).prepend('%3Cpre%20id%3D%22result%22%3E%3C%2Fpre%3E')%2C%24(%22img%2C.qprintable%22).remove()%2C%24(%22%23result%22).text(r)%2C%24(%22%23json%22).text(JSON.stringify(n))%2Cprompt(%22Select%20all%20and%20copy%22%2Cr)%7Dfunction%20r()%7Bvar%20e%3Dwindow.jQuery%3Bif(!e)%7BsetTimeout(r%2C100)%3Breturn%7De(function()%7Bt(%22.qprintable2%22)%7D)%7Dvar%20n%3Ddocument.createElement(%22script%22)%3Bn.setAttribute(%22src%22%2C%22http%3A%2F%2Fcode.jquery.com%2Fjquery.min.js%22)%2Cn.setAttribute(%22type%22%2C%22text%2Fjavascript%22)%2Cdocument.getElementsByTagName(%22body%22)%5B0%5D.appendChild(n)%2Cr()%7D)()

Answer 2

使用给定的 HTML，我会这样做来生成 CSV 数据 (demo)：

(function() {
    var a = $('table.qprintable2').map(function() {
        return $.trim($('b', this).text()) + '\t' +
            $.trim($('.first + div', this).text());
    });
    $('<textarea/>').val(a.get().join('\n')).appendTo('body');
})();​

如果您使用的浏览器支持 data: URI，您可以使用 window.open() 将 CSV 直接保存到文件中 (demo)：

window.open('data:text/csv;charset=utf-8,' + encodeURIComponent(a.get().join('\n')), '', '');

请注意，您的浏览器可能会阻止演示小提琴中的弹出窗口；当从小书签触发时，应该允许新窗口。 （您也可以不直接打开窗口，而是在页面上添加一个<input type="button">，单击它会打开窗口。）

更新：This version 将在页面底部添加“下载 CSV”链接；单击后，浏览器将保存或打开（取决于浏览器）CSV 文件。应使用此版本，而不是打开新窗口的版本。