0

怎么保存jquery操作dom的结果到文件?

比如,有个demo.html文件

<div class="container">
    <div class="card" data-category="fruit">
        <div class="card-body">
            <a href="#" class="card-link">香蕉</a>
            <a href="#" class="card-link">苹果</a>
        </div>
    </div>
    <div class="card" data-category="sport">
        <div class="card-body">
            <a href="#" class="card-link">篮球</a>
            <a href="#" class="card-link">足球</a>
        </div>
    </div>
</div>

用jquery可以得到每个.card的html:

<script>
    $(function () {
        $('.card').each(function(){
            var html=$(this).html();
            console.log(html);
        })
    });
</script>

问题:
我想把得到的每个.card的html保存为单独的文件,文件取名:

//文件名是属性`data-category`的值
fruit.html
sport.html

可是浏览器环境不能操作文件,所以不能保存成文件。
用node.js来做运行环境,jquery能运行吗?
要保存成文件应该怎么做呢?

4个回答

2

nodejs环境下正常来说不能运行jquery,不过还有个jsdom的包可以做到在nodejs环境下模拟DOM。
如果要从nodejs去做,就是先读取这个html文件,然后用正则表达式去匹配出每个class为card的闭合标签内的字符串,然后去写入文件。
nodejs中写入文件一般就是用fs内置模块writeFile或是writeFileSync,或是一些以fs模块为基础的扩展模块。

2

严格讲这个需求真的是后端做比较方便,不过我想能不能用Data URL试试,于是撸了一段:

$(function () {
  $('<a>', {
        href: 'data:text/html,' + encodeURIComponent($('.container').html()),
        text: '下载',
        download: 'fruit'
    }).appendTo('.container');
});

但是不知道为啥每次都只有一个片段,不完整。如果有哪位大佬知道还请帮忙斧正,或者指出问题……感激不尽

代码已改。每次只能存一个片段的原因是没做encodeURI转码……晕……

2

如是,尝试一下。原理就是,拿到不同的html片段去生成不同名称的下载文件。名称我暂时直接使用download,你可以替换。

<script>
    $(function () {
        $('.card').each(function(){
            var content = $(this).html(),
                aTag = document.createElement('a'),
                blob = new Blob([content]);
            aTag.download = 'download.html';
            aTag.href = URL.createObjectURL(blob);
            aTag.click();
            URL.revokeObjectURL(blob);
        })
    });
</script>
1

cheerio 服务器版的jquery,比jsdom其快了很多,在nodejs中有文件系统,可以直接将结果写入到文件

熟悉的语法:Cheerio实现了jQuery核心的一个子集,Cheerio 使用一个非常简单的,一致的DOM模型。这样解析,操作和呈现就会带来令人难以置信的性能提升。初步的端至端的基准测试表明Cheerio比JSDOM快大概8倍。

撰写答案