摘要：在线翻译纯前端百度翻译本地存储完成提取文本中的生词，并返回单词的翻译结果项目内容之前背单词的时候发现，直接背单词的话太枯燥，直接阅读英文书籍报纸又有太多的单词不认识，就想能够做个，直接检查出一个英文文本中的生词，并翻译出来。
在线翻译
纯前端 + 百度翻译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翻译单词
将返回的结果渲染到页面
仓库的代码都有注释，就不多说废话了
结语项目还很简陋，有时间再完善下。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/94671.html
摘要：在线翻译纯前端百度翻译本地存储完成提取文本中的生词，并返回单词的翻译结果项目内容之前背单词的时候发现，直接背单词的话太枯燥，直接阅读英文书籍报纸又有太多的单词不认识，就想能够做个，直接检查出一个英文文本中的生词，并翻译出来。 在线翻译 纯前端 + 百度翻译API + localStorage本地存储完成提取文本中的生词，并返回单词的翻译结果 项目内容 之前背单词的时候发现，直接背单词的...
摘要：如果有什么可以帮到你的无论是不是此项目中的问题都可以在提出我会尽我所能帮你解决欢迎大佬们提出好的问题和点子，我会第一时间去修正。 前言 本项目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack构建的一个移动端、PC端轻社区项目 项目地址GitHub 项目更新历史 开发环境 Macos + Vs code + Chrome 项目的灵感最初来源：由于我是一个宅男在...
摘要：如果有什么可以帮到你的无论是不是此项目中的问题都可以在提出我会尽我所能帮你解决欢迎大佬们提出好的问题和点子，我会第一时间去修正。 前言 本项目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack构建的一个移动端、PC端轻社区项目 项目地址GitHub 项目更新历史 开发环境 Macos + Vs code + Chrome 项目的灵感最初来源：由于我是一个宅男在...
阅读 1779·2023-04-26 02:51
阅读 2784·2021-09-10 10:50
阅读 2939·2021-09-01 10:48
阅读 3501·2019-08-30 15:53
阅读 1782·2019-08-29 18:40
阅读 370·2019-08-29 16:16
阅读 1997·2019-08-29 13:21
阅读 1783·2019-08-29 11:07
