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