在线翻译

纯前端 + 百度翻译API + localStorage本地存储
完成提取文本中的生词，并返回单词的翻译结果

项目内容

之前背单词的时候发现，直接背单词的话太枯燥，直接阅读英文书籍、报纸又有太多的单词不认识，
就想能够做个demo，直接检查出 一个英文文本中的 生词，并翻译出来。

本demo有下列内容

• 前端界面
• 用localStorage存储用户已近掌握的单词
• 利用百度翻译API翻译单词

项目演示

所以项目本身不需要服务器，编写玩静态资源后可以直接托管在GitHub Page上（GitHub真是伟大的网站）

在线地址

操作演示：

（无法加载GIF可以自行打开该链接）

代码逻辑

代码仓库
目前项目正处于初级阶段，所以简陋，还有许多未添加的功能

目录结构

. ├── README.md ├── css │   └── style.css ├── index.html └── js├── getTrans.js├── getVocabulariesFromText.js└── static├── jQuery.min.js└── md5.js

其中js/static目录下 一个提供jQuery，另一个用于百度翻译要求的MD5加密

localStorage

从项目网站所在的便签也打开控制台，观察localStorage

我把把所有单词分为已知know，正在学习learn和未知。并把已知的单词存储在localStorage。
这样做的好处是不需要服务器，坏处是用户换个浏览器之前的内容就没了

前端页面

分为三个部分：

• 输入框，用来等待用户输入文本
• 提交按钮，点击后开始翻译文本框中的内容
• 用来显示翻译结果的表格

js代码流程

为提交按钮绑定onClick时间

当用户点击提交按钮后

• 获得输入框中的文本
• 用正则表达式提取其中的英语单词
• 对提取到的单词做两个处理
• • 去除重复的单词
• • 去除已经学会的单词
• 利用百度翻译API翻译单词
• 将返回的结果渲染到页面

仓库的代码都有注释，就不多说废话了

结语

项目还很简陋，有时间再完善下。

总结

以上是生活随笔为你收集整理的无后端完成在线翻译功能的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。