node.js爬虫应用——前端程序员的词典command-translator

简介: 虽然高考英语考了135分,大学英语四级也过了,可到现在,写了两年代码,经常在写一个变量的时候,想半天也想不出来对应的英文单词是什么,总不能很可 (sha) 爱(bi) 的去用拼音吧,最后还是只能去求助有道了。虽然说打开有道网页,然后输入词语翻译不算太麻烦,担保每次都这样,总觉得不够方便,也不够逼格。

虽然高考英语考了135分,大学英语四级也过了,可到现在,写了两年代码,经常在写一个变量的时候,想半天也想不出来对应的英文单词是什么,总不能很可 (sha) 爱(bi) 的去用拼音吧,最后还是只能去求助有道了。虽然说打开有道网页,然后输入词语翻译不算太麻烦,担保每次都这样,总觉得不够方便,也不够逼格。

 先来看看我现在用的工具好了,首先安装command-translator:

cnpm i -g command-translator

 然后打开一个命令行直接翻译:

tl 翻译
# 输出如下
translate
interpret
translator
interpreter

够简单了吧,下面来看看怎么实现的。

 在写这个工具之前,我也用过一些插件,如果你用Alfred, 那么你应该已经用过一些翻译插件了。后来我觉得它颜值没有自带的spotlight高,所以就卸载了,然后装了个flashlight, 然而那里面的插件太少了,有一个有道翻译插件,然而只能英文翻译成中文,要它何用?最后打算自己写一个,可折腾了两天后,发现flashlight有问题,似乎是识别不了输入的中文,大概有道那个插件也是遇到这个问题,才没有做中文翻译英文吧。后来想着现在我们一般用vscode比较多,写个vscode插件也不错吧。然而vscode插件的命令中好像是带不了参数,如果用一个命令来启动插件,然后再输入要翻译的词语,最后再显示翻译结果,那还是太难用了。最后想着就写个命令行里面的翻译工具吧,对于前端程序员而言,node肯定是装了的,就用node来写。

 其实有了思路后,就很简单了。首先是要拿到翻译的结果。直接调用接口的很多,有道官方也有,不过都需要去申请一个key,个人比较反感,就简单点,直接爬网页,分析dom。整个程序用了两个第三方模块:cheerio处理dom,类似jquery的语法;commander用来简化命令行交互,TJ大神的大作。

 首先爬取页面,解析结果,这里爬的是金山词霸的页面,之前写论文时感觉对于一些专业词汇,金山翻译的更准确。几行代码就能搞定,这里直接上代码好了:


const http = require('http')
const cheerio = require('cheerio')
const baseUrl = "http://www.iciba.com/"
function spider(word){
  return new Promise((resolve,reject)=>{
    http.get(encodeURI(baseUrl+word),res=>{
      let html=''
      res.on('data',data=>html+=data)
      res.on('end',()=>resolve(html))
    })
  })
}
function parse(html){
  const ch = cheerio.load(html)
  const res = []
  ch(".js-base-info .in-base .base-list p span").each((i,el)=>{
    res.push(ch(el).text().replace(new RegExp(';'),''))
  })
  return res
}

module.exports = function(word){
  return new Promise((resolve,reject)=>{
    spider(word).then(html=> resolve(parse(html)))
  })
}

然后我么调用导出的方法,传参为需要翻译的词语,中文英文都可以,最后返回的就是一个数组,为翻译结果。

 最后要解决的是命令行直接输入tl <word>直接翻译,这部分代码写在一个js文件中,我把它叫做bin.js, 然后在package,json配置一个key为"tl"的bin,指向bin,js即可。bin,js就是获取tl后面的参数,然后调用上面导出的那个方法来翻译,最后把结果打印出来即可,代码:

#!/usr/bin/env node
const program = require('commander')
const translate = require('./translator')
program.version(require('./package.json').version)
  .action((arg,cmd)=>{
    translate(arg).then((res=[])=>{
      res.forEach(r=>console.log(r)
    })
  })
  .parse(process.argv)

OK了,以后翻译只需快捷键打开终端,输入tl <word>就可以了。

 什么?你不用node,你是写java的?都什么年代了,还不学我,来搞一波前端,当年我可是写过C艹,后来C艹艹,再后来Android、Java,然后转前端的。开玩笑啦,看完这篇文章,随便你用什么语言都能很快写一个这样的词典出来。

 以后如果再看到你身边的朋友还在打开网页来翻译,或者用拼音的,直接把这篇文章丢给他把

原文发布时间为:2018年05月06日
原文作者: 孤丶狼丶

本文来源:开源中国 如需转载请联系原作者


目录
相关文章
|
15天前
|
数据采集 存储 JSON
Python网络爬虫:Scrapy框架的实战应用与技巧分享
【10月更文挑战第27天】本文介绍了Python网络爬虫Scrapy框架的实战应用与技巧。首先讲解了如何创建Scrapy项目、定义爬虫、处理JSON响应、设置User-Agent和代理,以及存储爬取的数据。通过具体示例,帮助读者掌握Scrapy的核心功能和使用方法,提升数据采集效率。
59 6
|
11天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
10天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
17 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
16天前
|
数据采集 前端开发 中间件
Python网络爬虫:Scrapy框架的实战应用与技巧分享
【10月更文挑战第26天】Python是一种强大的编程语言,在数据抓取和网络爬虫领域应用广泛。Scrapy作为高效灵活的爬虫框架,为开发者提供了强大的工具集。本文通过实战案例,详细解析Scrapy框架的应用与技巧,并附上示例代码。文章介绍了Scrapy的基本概念、创建项目、编写简单爬虫、高级特性和技巧等内容。
39 4
|
15天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
22 1
|
16天前
|
数据可视化 JavaScript 前端开发
数据可视化进阶:D3.js在复杂数据可视化中的应用
【10月更文挑战第26天】数据可视化是将数据以图形、图表等形式呈现的过程,帮助我们理解数据和揭示趋势。D3.js(Data-Driven Documents)是一个基于JavaScript的库,使用HTML、SVG和CSS创建动态、交互式的数据可视化。它通过数据驱动文档的方式,将数据与DOM元素关联,提供高度的灵活性和定制性,适用于复杂数据的可视化任务。 示例代码展示了如何使用D3.js创建一个简单的柱状图,展示了其基本用法。D3.js的链式调用和回调函数机制使代码简洁易懂,支持复杂的布局和交互逻辑。
49 3
|
15天前
|
数据采集 中间件 API
在Scrapy爬虫中应用Crawlera进行反爬虫策略
在Scrapy爬虫中应用Crawlera进行反爬虫策略
|
16天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
16 1
|
19天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
25 1
|
21天前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
27 1