单词翻译在APP中很常见，那么对于网页中的一段中英文混合内容，如何准确翻译单词呢？我要渲染的内容是一段html。用react渲染一段html内容并不难，只要用dangerouslySetInnerHTML就可以了。但是可以翻译内容中的英文单词，是如何实现的呢？一起来看看吧。效果是这样的。。。我的前端是做内容展示的，后台把Html格式的内容传给前端。前端native元素的dangerouslySetInnerHTML属性解析html内容，然后就可以使用react框架渲染html了。仔细看，这个属性用了Whatis{{}}2个括号，而不是1个括号。原因是：第一个{}代表jsx语法的开始，第二个代表dangerouslySetInnerHTML接收到一个对象键值对。它接收的内容是html，很容易受到XSS攻击，所以这个属性有dangerous这个词。。。重组英文单词的过程和后台传给我的内容如下：由于需要extractwordsfortranslation，你必须能够得到每一个词，所以我的计划是提取内容，把一个英文单词放到一个span标签里。但是处理这一步的最佳位置在哪里呢？想了想，还是在页面渲染之前做吧，这样可以减轻页面渲染的压力，提高渲染速度。所以我在前端接收到后端发过来的数据后，先处理一下再存入store。案例“OBT_BOOK_CONTENT_SUCCESS”：varnewContents=action.meta.bookcontent.map((item,index)=>{item.paragraphContent=item.paragraphContent.replace(/src="/g,`src="${url}`);//处理caseContent中的单词vardiv=document.createElement('div');div.innerHTML=item.paragraphContent;varcaseContent=div.querySelector('.caseContent');if(caseContent){vararr=caseContent.innerText.split("");for(vari=0;i"+arr[i]+""}案例内容.innerHTML=arr.join("");item.paragraphContent=div.innerHTML;}returnitem;})returnObject.assign({},state,{bookcontent:newContents})由于传给我的是一大段内容包含不止一种类型的元素和不止一个类名，比如div.caseTitle.caseContentstrong等，但是我只处理最大的一段英文，即caseContent中只有英文单词这很容易处理。我没有用string的方法来查找字符串在哪里，如何截取，如何拼接。没有。我利用了DOM的原理，借助DOM的原生api，帮我得到了我想要的英文单词。我创建了一个div（没有DOM我会自己创建DOM），然后DOM去找.caseContent，把里面的单词全部用空格提取出来，每个单词用span包起来，替换掉.caseContent里的内容，同时innerHTML的div会改变，最后paragraphContent会改变。这样，后端传过来的东西，又被修改，重新使用。提取单词由于我要翻译的单词被包裹在一个span中，我需要检查用户点击屏幕的节点是否是一个spanif(e.target.nodeName==='SPAN'){vars="";如果（e.target.innerText）{varlen=e.target.innerText.length;if(!/^[\u4e00-\u9fa5]{0,}$/.test(e.target.innerText)){if(e.target.innerText[len-1]===','||e.target.innerText[len-1]==='.'){s=e.target.innerText.substring(0,len-1)}else{s=e.target.innerText;}varchooseSpan=e.target;this.props.checkWords(s,chooseSpan);}}console.log(s);}使用regular!/^[\u4e00-\u9fa5]{0,}$/提取英文单词，但是有些单词以英文逗号和句号结尾，所以需要用substring来切词，然后调用方法.这里提取页面点击的内容需要CSS的配合。用户选择：文本；用户选择：文本；允许选择页面中的内容。而user-select:none是让页面中的内容不被选中。-ms-用户选择：无；-webkit-用户选择：无；用户选择：无；拿到单词s后，需要做一点交互，就是选中的单词高亮显示，all，span元素也是需要处理的。为了严谨起见，需要判断是不是单词。如果是，则处理跨度。checkWords(txt,selectedSpan){//检查单词this.selectedSpan=selectedSpan;if(txt.toString().length>1){if(/^\w+$/.test(txt)){this.props.getWord(txt);this.setState({showWord:true})selectedSpan.style.color="#fff";selectedSpan.style.backgroundColor="rgb(0,153,223)";}}}查询是在请求翻译接口的getWord方法中调用的子子的api，我用的是有道智云的api。我需要注册一个帐户并申请一个应用程序。获取appKey和appSecret，设置from和to的值，也就是你要切换的语言，准备一个随机数sale，然后生成各种签名。.varappSecret='GOPjZoiSnH592P31Qn6xoallHn3zUnSh';varappKey='06fc15a9c06cb290';varsalt=''+(newDate).getTime();//多个查询可以用\n连接如query='apple\norange\nbanana\npear'varfrom='en';varto='zh-CHS';varstr1=appKey+q+salt+appSecret;变种数据=空；var符号=md5(str1);变量sendRes=res;标志=标志。toUpperCase();q=encodeURI(q);varurl=`http://openapi.youdao.com/api?q=${q}&from=${from}&to=${to}&appKey=${appKey}&salt=${salt}&sign=${sign}`有了这个url之后，就可以请求了。返回的东西是：播放word的地方是H5的audio元素，src是http://dict.youdao.com/dictvoice?audio=${this.props.word.query}后来发现Scallop的wordapi也不错。大了会有限制，以后打算换扇贝。至此，使用react框架完成移动端页面的定向词翻译就完成了。结合了CSS、DOM、正则化、使用其他API等知识，算是一个小综合测评。不知道其他同学有没有做过这样的事情。如果是这样，你可以分享它。完全的。
