JavaScript实现划词翻译

喜欢ヅ旅行 2021-06-26 16:06 493阅读 0赞

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetWord.aspx.cs" Inherits="Pro.GetWord" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="Content/htrans.css" rel="stylesheet" />
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <span onclick="SelectText()">河中鱼类离奇死亡，下游居民频染怪病，沿岸植物不断变异，是残留农药？还是生化攻击？》</span>
    
            </div>
        </form>
        <script src="http://shared.ydstatic.com/js/jquery/jquery-3.1.1.min.js"></script>
        <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
        <script src="js/htrans.js"></script>
        <script type="text/javascript"> function SelectText() { try { var selecter = window.getSelection().toString(); if (selecter != null && selecter.trim() != "") { //alert(selecter); } } catch (err) { var selecter = document.selection.createRange(); var s = selecter.text; if (s != null && s.trim() != "") { ///alert(s) } } } //替换文本前与后的空格 String.prototype.trim = function () { return this.replace(/(^\s*)|(\s*$)/g, ""); } $("body").htrans({ "appId": "14a2****************", "secretKey": "dEdzze***********WHx1Q" }); </script>
    </body>
    </html>

htrans.js

(function ($) { 
        $.fn.extend({ 
            "htrans": function (options) { 
                options = $.extend({ 
                    "apiUrl": "https://openapi.youdao.com/api",
                    "appId": "",
                    "secretKey": "",
                    "from": "zh-CHS",
                    "to": "en"
    
                }, options);
    
                $('body').append('<div class="htrans-tip-box"></div>');
    
                var $this = $(this);
                var l = t = browserWidth = 0;
                var tip = $(".htrans-tip-box");
    
                //鼠标抬起进，获取选择文字的字数。并根据字数，是否显示弹出层
                $this.mouseup(function (event) { 
                    //IE和火狐兼容性的处理函数。
                    function htrans() { 
                        if (document.selection) { 
                            return document.selection.createRange().text;// IE
                        } else { 
                            return window.getSelection().toString(); //标准
                        }
                    }
    
                    var q = htrans();
                    if (q.length <= 0) { 
                        return;
                    }
    
                    l = event.clientX;
                    t = event.clientY;
                    browserWidth = document.body.clientWidth;
    
                    result = getTranslate(q);
                });
    
                // 获取翻译内容
                var getTranslate = function(q) { 
                    var salt = (new Date).getTime();
                    var sign = md5(options.appId + q + salt + options.secretKey);
    
                    $.ajax({ 
                        url: options.apiUrl,
                        type: 'post',
                        async: false,
                        dataType: 'jsonp',
                        data: { 
                            q: q,
                            appKey: options.appId,
                            salt: salt,
                            from: options.from,
                            to: options.to,
                            sign: sign
                        },
                        success: function (data) { 
                            display(translateBox(q, data));
                        },
                        fail:function() { 
                            display("获取数据失败~")
                        }
                    })
                };
    
                // 显示提示框，用以显示翻译信息或提示信息
                var display = function(text) { 
                    var tipWidth = tip.outerWidth();
                    var leftPos = 0;
    
                    if (browserWidth - l > tipWidth) { 
                        leftPos = l + 10;
                    } else { 
                        leftPos = l - tipWidth;
                    }
                    tip.html(text)
                        .css({ "top": t + 10, "left": leftPos})
                        .fadeIn();
                };
    
                var translateBox = function(q, result) { 
                    if (parseInt(result.errorCode)) { 
                        return "请求错误，错误码：" + result.errorCode;
                    }
    
                    var content = phonetic = '';
                    if (result.basic !== undefined) { 
                        var explains = result.basic.explains;
                        var phonetic = getPhonetic(result.basic);
                        var i;
    
                        for (i = 0; i < explains.length; i++) { 
                            var line = explains[i].replace(/^(\w+\.)/g, '<span class="htrans-tip-preposition">$1</span>');
                            content += (i + 1) + ". </span>" + line + "<br />";
                        }
                    } else if (result.translation !== undefined) { 
                        for (i = 0; i < result.translation.length; i++) { 
                            content += (i + 1) + ". " + result.translation[i] + "<br />";
                        }
                    } else { 
                        return "无翻译结果。";
                    }
    
                    var title = '<span class="htrans-tip-query-word">' + q + '</span> ';
    
                    if (phonetic) { 
                        title += '<span class="htrans-tip-phonetic">[' + phonetic + "]</span><br />";
                    } else { 
                        title += "<br />";
                    }
    
                    return title + '<div class="htrans-tip-content">' + content + '</div>';
                };
    
                // 获取单词拼音
                var getPhonetic = function(basic) { 
                    var phonetic = [
                        basic['phonetic'],
                        basic["uk-phonetic"],
                        basic["uk-phonetic"]
                    ];
    
                    // 去除空值
                    phonetic.filter(function (n) { 
                        return n;
                    });
    
                    return phonetic ? phonetic[0] : '';
                };
    
                // 点击文档任何位置，翻译框消失
                $(document).on("click", function () { 
                    tip.fadeOut();
                });
    
                // 改变浏览器尺寸时，翻译框消失
                $(window).resize(function () { 
                    tip.fadeOut();
                });
    
                // 阻止冒泡，防止第一次选中文字时，由于冒泡，
                // 而触发了$(document).click事件
                tip.on("click", function (event) { 
                    event.stopPropagation();
                });
    
                return $this;
            }
        })
    })(jQuery);

htrans.css

.htrans-tip-box { 
        border: 1px solid #cfcfcf;
        border-radius: 3px;
        padding: 15px 22px;
        position: fixed;
        min-width: 300px;
        max-width: 350px;
        width: auto;
        height: auto;
        min-height: 100px;
        background: #efefef;
        display: none;
        line-height: 1.5em;
    }
    
    .htrans-tip-query-word { 
        color: black;
        font-weight: 700;
    }
    
    .htrans-tip-phonetic { 
        color: #5fa207;
    }
    
    .htrans-tip-content { 
        font-size: 85%;
    }
    
    .htrans-tip-preposition { 
        color: #7a7a7a;
    }

## 如图 ##

![在这里插入图片描述][20190817223116951.png]![在这里插入图片描述][20190817223132727.png]

[20190817223116951.png]: https://img-blog.csdnimg.cn/20190817223116951.png
[20190817223132727.png]: /images/20210626/9ff178633fa74632a82cb0df967b290b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，493人围观）

还没有评论，来说两句吧...

相关阅读

相关谷歌浏览器无法翻译成中文，谷歌翻译，最新（沉浸式翻译和划词翻译，chrome无法翻译，谷歌浏览器无法翻译此网页）

![c0a62cc599784711b16c4b056383605e.png][] 简介：谷歌浏览器自带的翻译功能，对我们来说用处很大，但有的时候突然就会变成“无法翻译此网

不念不忘少年蓝@/ 2023年10月12日 20:32/ 0 赞/ 74 阅读

相关 js划词翻译、屏幕取词，取词位置获取（真正解决定位问题）

> 划词、鼠标选词、翻译这些都是很简单的事一般熟悉js鼠标事件都能搞定，而比较难的是怎么确定我们选中的词在哪个位置执行完翻译的结果该怎么定位，这个问题我在开发翻译插件时摸了个深

小鱼儿/ 2023年01月01日 15:48/ 0 赞/ 148 阅读

相关推荐一个谷歌浏览器插件：划词翻译

地址：[划词翻译插件][Link 1] 最近在看一些英文文档，遇到了一些词汇不认识，在谷歌浏览器上找到了这个翻译插件谷歌浏览器自己有一个全文翻译的功能，对于一些技术类文档

以你之姓@/ 2023年01月01日 11:47/ 0 赞/ 243 阅读

相关 CSS实现--鼠标划入

还是先上效果图，看看是不是大家所需要的这种效果 ![20200921195205894.gif][]没什么过程直接上代码 <!DOCTYPE html> <

骑猪看日落/ 2022年12月09日 03:30/ 0 赞/ 167 阅读

相关 Linux桌面鼠标取词自动翻译

说明：鉴于linux环境下没有像有道词典一样好用的自动取词翻译的软件，所以决定自己写一个，方便看文档的时候，随时翻译。程序基于Python 完成。环境fedora2

浅浅的花香味﹌/ 2022年08月27日 11:46/ 0 赞/ 227 阅读

相关 JavaScript 鼠标划入划出

<!DOCTYPE html> <html> <head> <title>鼠标移入移出</title> <meta chars

妖狐艹你老母/ 2022年07月13日 05:55/ 0 赞/ 191 阅读

相关 ubuntu小工具__划词字典 GoldenDict

前言每次阅读英文文档的时候，我们总会为我们浅显的词汇量瑟瑟发抖，又苦于老是百度查的麻烦，今天猛然间发现了一个好用的东西，叫划词字典，然后linux下的有道，最终以pyq

约定不等于承诺〃/ 2022年05月24日 22:15/ 0 赞/ 233 阅读

相关【店小蜜】划词的作用

需要详细理解的请上原文：[http://www.sohu.com/a/286645276\_100294485][http_www.sohu.com_a_286645276_

刺骨的言语ヽ痛彻心扉/ 2021年11月24日 00:40/ 0 赞/ 288 阅读

相关 javascript实现划词搜索功能(兼容IE,firefox,opera)

、网上流传的Js版划词搜索代码浏览器兼容上有问题，经过两天的改写终于做出可兼容非IE的版本. JS代码默认搜索引擎为:google 转自: js中国 [ht

爱被打了一巴掌/ 2021年11月22日 10:12/ 0 赞/ 356 阅读

相关 JavaScript实现划词翻译

<%@ Page Language="C" AutoEventWireup="true" CodeBehind="GetWord.aspx.cs" Inherits="

喜欢ヅ旅行/ 2021年06月26日 16:06/ 0 赞/ 494 阅读