js教程

JS翻译网页替换代码

我的站长站 2023-01-04 人阅读

JS翻译网页替换代码,自动提取网页中所有文本节点,可根据需求来进行翻译或替换。

function listen(callback) {
    // 获取 HTML 文档中的所有元素,但不包括 下列 选择器的元素
    var exclude = ['head', 'pre', 'script', 'textarea']//排除名单
    var selectors = []
    exclude.forEach((item, index) => {
        selectors.push(item)//排除该元素
        selectors.push(item + ' *')//排除该元素后代
    })
    get(document.querySelectorAll('*:not(' + selectors.join(',') + ')'))//*:not(pre,pre *)
    // 创建 MutationObserver 对象
    let observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            // 遍历新添加的节点
            for (let i = 0; i < mutation.addedNodes.length; i++) {
                let node = mutation.addedNodes[i];
                // 如果节点是元素节点,就调用 get 函数
                if (node.nodeType === 1) {
                    callMyFunction(node)
                    function callMyFunction(param1) {
                        setTimeout(function () {
                            get([...param1.querySelectorAll('*'), param1])
                        }, 300);
                    }
                }
            }
        });
    });
    // 设置 MutationObserver 的参数,表示监听所有元素的变化
    let config = {
        childList: true,
        subtree: true
    };
 
    // 启动 MutationObserver
    observer.observe(document, config);
 
    function get(elements) {
        // 遍历所有元素
        for (let i = 0; i < elements.length; i++) {
            let element = elements[i];
            // 遍历元素的 childNodes
            for (let j = 0; j < element.childNodes.length; j++) {
                let node = element.childNodes[j];
                // 如果当前节点是一个文本节点(nodeType 为 3)且不包含子节点(nodeName 为 '#text'),就将文本添加到数组中
                if (node.nodeType === 3 && node.nodeName.toLowerCase() === '#text') {
                    // 过滤掉文本中的换行符
 
                    let text = node.nodeValue
                    var v = { a: false, b: false }
                    text.slice(0, 1) == " " ? v.a = true : v.a = false
                    text.slice(-1) == " " ? v.b = true : v.b = false
                    text = text.replace(/[\n\t\r]/g, '').trim();
                    // 如果文本不仅包含空白字符,就将它添加到数组中
                    if (/\S/.test(text)) {
                        //不处理只有数字和符号的文本
                        if (!/^[0-9\+\-\*\/\=><&\!@#\$%\^\*\\(\)\[\]\{\}_,.;',。、;’、]{1,}$/.test(text)) {
                            //---------------处理
                            //翻译text
                            //text = "$" + text
                            //---------------处理结束--显示
                            v.a == true ? text = " " + text : text
                            v.b == true ? text = text + " " : text
                            if (!element.matches('script,textarea')) {//单元素阻断,白名单
                                node.nodeValue = text
                                callback.call({ text: text, node: node, element: element })
                            } else {
                                //console.log("位于排除标签列表", element);
                            }
                        } else {
                            //console.log("只有数字和符号的文本", text);
                        }
                    }
                }
            }
        }
    }
}
let time = null;
var data = []
listen(
    function () {
        if (time !== null) {
            clearTimeout(time);
        }
        time = setTimeout(async () => {
            console.log(data);//抖动结束,开始翻译
            var sl = []
            data.forEach((item, index) => {//取text
                sl.push(item['text'])
            });
            //var tl = await translation_arr(sl)//返回一个数组[[翻译结果,源语言类型],...*]//使用的谷歌批量翻译API,这里就不提供了
            var tl = []
            sl.forEach((item, index) => {
                tl.push('[ 编辑:' + item + ',' + index + '] ')
            });
 
            tl.forEach((item, index) => {
                data[index]['node'].origText = data[index]['node'].nodeValue
                data[index]['node'].nodeValue = item//更改文本
            });
            //这里的this指向的是input
        }, 500)
        data.push(this)
    }
)
/* 监听文本节点被点击
document.onselectstart = function (e) {
    console.log(e.target,e.target.origText);
}*/


相关专题
翻译
翻译
2023-12-28 23

我们常常需要参考国外开发文献,翻译工具是日常开发中必备工具.目前很多大厂的免费翻译工具都停止更新了,部分好用的翻译软件也都需要收费.以下是我的站长站收集整...

相关推荐
  • js代码
  • js指定时间定时自动执行代码分享

    示例代码用的`setTimeout()`函数,在指定的时间后执行。代码非常的简单,获取当前时间和设定一个指定时间,指定时间减去当前时间就是定时的时间,如果定时器到期时等于0,就代表时间到了,就运行executeAtTime函数的方法。function executeAtTime() { console....

    js教程 41 6个月前
  • JS代码解除网页右键限制

    JS解除右键限制方法一javascript:(function () {function R(a) {ona = "on" + a;if (window.addEventListener){window.addEventListener(a, function (e) {for (var n = e.originalTarget; n; n = n.parentNode){n[ona] = null;}}, true);}window[o...

    js教程 171 3年前
  • 淘宝买家秀API+ajax代码

    淘宝买家秀API+ajax代码,用的是这个API,https://api.66mz8.com/api/rand.tbimg.php?format=jsonJSON返回格式,测试依旧可用。$(function(){ $.get('https://api.66mz8.com/api/rand.tbimg.php?format=json',function(data){ document.getElementB...

    js教程 714 3年前
最新更新
  • js截取字符串教程

    slice()方法接受两个参数,起始索引和结束索引(可选)。它返回从起始索引到结束索引(不包括结束索引)之间的子字符...

    js教程 3个月前
  • find findIndex indexOf索引选择器使用方法

    find使用方法find方法是ES6引入的一种数组方法,可以用来查找数组中符合条件的元素。语法是:array.find(callba...

    js教程 3个月前
  • js复制网页内容教程

    Async Clipboard API方法HTML5新增的方法,无需引入第三方插件,直接就可以复制内容。低版本的浏览器可能会不兼...

    js教程 3个月前
  • js获取字符长度函数分享

    js获取字符长度函数function objLen(str) { if (str == null) return 0; if (typeof str != "string") { ...

    js教程 3个月前
  • 网站LED跑马灯效果广告代码

    网站可以看到很多的论坛网站都会用到这种网站LED跑马灯效果,这种效果实现也很简单,分享给大家。LED跑马灯效果...

    js教程 4个月前