欢迎！我白天是个邮递员，晚上就是个有抱负的演员。这是我的网站。我住在天朝的帝都，有条叫做Jack的狗。
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);}*/
相关专题
