【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;
// 如果节点是元素节点，就调用 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;
// 遍历元素的 childNodes
for (let j = 0; j < element.childNodes.length; j++) {
let node = element.childNodes;
// 如果当前节点是一个文本节点（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 (!/^\{\}_,.;'，。、；’、]{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['node'].origText = data['node'].nodeValue
data['node'].nodeValue = item//更改文本
});
//这里的this指向的是input
}, 500)
data.push(this)
}
)
/* 监听文本节点被点击
document.onselectstart = function (e) {
console.log(e.target,e.target.origText);
}*/ 大神，厉害啊 支持一下大神 厉害啊 ~~~~~~~ 哈哈哈哈哈感觉可以编点离谱的东西 学习一下 学习一下，努力学习 真棒，感谢大佬分享{:301_993:} 感谢分享 楼主厉害了