如何在HTML文件的指定位置插入文本 | 实用技巧 | 南锋

南锋

南奔万里空，脱死锋镝余

如何在HTML文件的指定位置插入文本 | 实用技巧

发表于 更新于 分类于 ， 阅读次数： Valine：
本文字数： 3.8k 阅读时长 ≈ 3 分钟

记录自己工作中用到的脚本，因为我们的Cocos Creator项目导出web项目后，需要修改index.html文件，每次手动修改都很麻烦，而且容易出错，于是决定用脚本来搞定。
我这里是用python写的，python版本为3.8

要在 HTML 文件的指定位置插入指定的文本，可以使用 Python 的 BeautifulSoup 库。

安装库

首先，安装 BeautifulSoup 和 lxml：

1
pip3 install BeautifulSoup

代码

我这里是在index.html中的<head>和<body>中添加了一些代码。完整代码如下：

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
from bs4 import BeautifulSoup

def insert_code_in_html(file_path):
    head_code = '''
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #GameDiv {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        #Cocos3dGameContainer {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #GameCanvas {
            width: 100%;
            height: 100%;
        }

        #loading-animation {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: calc(50% - 200px);
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #loading-text {
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
            position: absolute;
            top: calc(50% - 80px);
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            text-align: center;
        }
    </style>
    '''
    body_code = '''
    <div id="loading-animation">
        <img src="web.png" alt="Loading..." style="width: 100%; height: 100%;">
    </div>
    <div id="loading-text">Loading may take a few seconds for the first time. Please be patient.</div>
    <script>
        const tg = window.Telegram.WebApp;
        tg.isClosingConfirmationEnabled = true;
    </script>
    '''

    # 读取 HTML 文件内容
    with open(file_path, 'r', encoding='utf-8') as file:
        soup = BeautifulSoup(file, 'lxml')

    # 在 <head> 中插入代码
    if soup.head:
        soup.head.append(BeautifulSoup(head_code, 'html.parser'))
    else:
        print("<head> 标签未找到。")

    # 在 <body> 中插入代码
    if soup.body:
        soup.body.append(BeautifulSoup(body_code, 'html.parser'))
    else:
        print("<body> 标签未找到。")

    # 将修改后的 HTML 写回文件
    with open(file_path, 'w', encoding='utf-8') as file:
        file.write(str(soup))

# 示例用法
file_path = 'web-mobile/index.html'
insert_code_in_html(file_path)

由于自己太懒，连代码都不想运行，于是乎，直接将上面python脚本导出了一个.exe可执行文件，每次只要双击改执行文件就行了。

踩坑

运行的时候报下面错：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Traceback (most recent call last):
  File ".\html.py", line 1, in <module>
    from bs4 import BeautifulSoup
  File "C:\Users\84267\AppData\Roaming\Python\Python38\site-packages\bs4\__init__.py", line 37, in <module>
    from .builder import (
  File "C:\Users\84267\AppData\Roaming\Python\Python38\site-packages\bs4\builder\__init__.py", line 9, in <module>
    from bs4.element import (
  File "C:\Users\84267\AppData\Roaming\Python\Python38\site-packages\bs4\element.py", line 13, in <module>
    from bs4.formatter import (
  File "C:\Users\84267\AppData\Roaming\Python\Python38\site-packages\bs4\formatter.py", line 1, in <module>
    from bs4.dammit import EntitySubstitution
  File "C:\Users\84267\AppData\Roaming\Python\Python38\site-packages\bs4\dammit.py", line 12, in <module>
    from html.entities import codepoint2name
  File "E:\Project_D_tg\build\html.py", line 1, in <module>
    from bs4 import BeautifulSoup
ImportError: cannot import name 'BeautifulSoup' from partially initialized module 'bs4' (most likely due to a circular import) (C:\Users\84267\AppData\Roaming\Python\Python38\site-packages\bs4\__init__.py)

如下图：

解决方案： python文件名的问题，因为我的python脚本命名为html.py，这里的html和代码里面的html冲突，所以导致报错，这里只需要修改python的文件名即可。

好吧，表示自己第一次遇到这种因为文件名报错的情况。

+