本文主要是介绍无后端完成在线翻译功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在线翻译
纯前端 百度翻译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/staticlocalStorage
从项目网站所在的便签也打开控制台，观察localStorage
前端页面
分为三个部分：
- 输入框，用来等待用户输入文本
- 提交按钮，点击后开始翻译文本框中的内容
- 用来显示翻译结果的表格
js代码流程
为提交按钮绑定onClick时间
当用户点击提交按钮后
- 获得输入框中的文本
- 用正则表达式提取其中的英语单词
- 对提取到的单词做两个处理
-
- 去除重复的单词
-
- 去除已经学会的单词
- 利用百度翻译API翻译单词
- 将返回的结果渲染到页面
仓库的代码都有注释，就不多说废话了
结语
项目还很简陋，有时间再完善下。
更多专业前端知识，请上 【猿2048】www.mk2048.com
这篇关于无后端完成在线翻译功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
