【JS】网页翻译

2023-01-01编程源码 浏览

提取网页中所有文本节点，可根据需求来进行翻译或替换

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);
}*/