JS翻译网页替换代码

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

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);

}*/

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

执刀人的工具库

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值