基于Python打造超漂亮的HTML兩欄文本對比工具
更新時間：2025年09月08日 09:04:25 作者：幸福清風(fēng)
在日常開發(fā)、文檔撰寫或代碼審查中,我們經(jīng)常需要對比兩個文本文件的差異,本文將使用Python + difflib + HTML + CSS 手動打造一個支持行內(nèi)字符級差異高亮的兩欄對比工具,需要的可以了解下
在日常開發(fā)、文檔撰寫或代碼審查中，我們經(jīng)常需要對比兩個文本文件的差異。雖然系統(tǒng)自帶的 diff 工具或 IDE 插件可以滿足基本需求，但它們往往不夠直觀，尤其是當(dāng)需要分享給非技術(shù)人員時。
今天，我將帶你用 Python + difflib + HTML + CSS 手動打造一個美觀、清晰、支持行內(nèi)字符級差異高亮的兩欄對比工具，并自動生成可瀏覽器查看的 HTML 報告！
功能亮點
雙欄并排顯示：左右分別為兩個文件內(nèi)容，一目了然
行號標(biāo)注：每行左側(cè)顯示行號，刪除/新增行特殊標(biāo)記為 -
行內(nèi)差異高亮：
- 紅色刪除線表示被刪內(nèi)容（
<span class="highlight-delete">） - 綠色加粗表示新增內(nèi)容（
<span class="highlight-insert">）
智能分組上下文：使用 difflib.SequenceMatcher 智能識別修改塊，保留上下文
自動換行 & 響應(yīng)式布局：長行自動折行，適配不同屏幕
美觀現(xiàn)代化 UI：采用扁平化設(shè)計 + 陰影 + 圓角 + 懸停效果
一鍵打開瀏覽器預(yù)覽：生成后自動調(diào)用本地瀏覽器打開結(jié)果
核心技術(shù)棧
| 技術(shù) | 用途 |
|---|---|
| difflib | 計算文本差異（行級 + 字符級） |
| os, urllib.parse | 文件路徑處理與 URL 構(gòu)造 |
| webbrowser | 自動打開瀏覽器 |
| HTML/CSS | 渲染可視化界面 |
| pre-wrap + word-break | 實現(xiàn)代碼塊自動換行 |
實現(xiàn)思路詳解
1. 讀取文件內(nèi)容
def read_file(filepath):
with open(filepath, 'r', encoding='utf-8') as f:
return [line.rstrip('\n') for line in f.readlines()]
注意：保留原始換行符信息用于對比，但去除 \n 避免干擾字符級 diff。
2. 行內(nèi)字符級差異高亮
利用 difflib.SequenceMatcher.get_opcodes() 分析兩行字符串的差異：
def highlight_line_diff(text1, text2):
sm = difflib.SequenceMatcher(None, text1, text2)
result1 = []
result2 = []
for tag, i1, i2, j1, j2 in sm.get_opcodes():
part1 = text1[i1:i2]
part2 = text2[j1:j2]
if tag == 'equal':
result1.append(part1)
result2.append(part2)
elif tag == 'delete':
result1.append(f'<span class="highlight-delete">{part1}</span>')
elif tag == 'insert':
result2.append(f'<span class="highlight-insert">{part2}</span>')
elif tag == 'replace':
result1.append(f'<span class="highlight-delete">{part1}</span>')
result2.append(f'<span class="highlight-insert">{part2}</span>')
return ''.join(result1), ''.join(result2)
示例：
- 原文：
Hello world - 修改：
Hello Python - 輸出：
Hello <del>world</del><ins>Python</ins>
3. 使用get_grouped_opcodes(n=3)顯示上下文
matcher = difflib.SequenceMatcher(None, lines1, lines2) blocks = matcher.get_grouped_opcodes(n=3) # 每個差異塊前后保留3行相同內(nèi)容
這樣不會只展示“純差異”，而是讓用戶看到變更前后的完整邏輯上下文，極大提升可讀性。
4. 構(gòu)建 HTML 表格結(jié)構(gòu)
每一行生成如下結(jié)構(gòu)：
<tr>
<td class="line-num">42</td>
<td class="content left"><pre>這是修改過的<del>舊內(nèi)容</del><ins>新內(nèi)容</ins></pre></td>
<td class="line-num ins">42</td>
<td class="content right added"><pre>這是修改過的<ins>新內(nèi)容</ins></pre></td>
</tr>
并通過 CSS 控制樣式：
- 刪除行：粉紅底 + 紅邊框
- 新增行：淡綠底 + 綠邊框
- 修改行：淺黃底 + 橙邊框
- 空白占位：灰色斜體
-
5. 美化 CSS 樣式（關(guān)鍵技巧）
td.content pre {
white-space: pre-wrap; /* 保留空格和換行 */
word-wrap: break-word; /* 超長單詞也能斷行 */
}
table.diff {
table-layout: fixed; /* 固定列寬，避免錯位 */
width: 100%;
}
小貼士：如果不設(shè)置 table-layout: fixed，長文本會撐破表格！
使用方法
只需調(diào)用函數(shù)即可：
generate_beautiful_side_by_side_diff(
file1_path="file1.txt",
file2_path="file2.txt",
open_in_browser=True,
output_html="【美化版】兩欄對比結(jié)果.html"
)
運行后會自動：
- 生成 HTML 文件
- 打印路徑
- 自動用默認(rèn)瀏覽器打開預(yù)覽
效果截圖預(yù)覽（文字描述）
想象一下這個畫面：
- 頂部是深藍色標(biāo)題欄：“文檔兩欄對比”
- 下方是一個整潔的雙欄表格，左側(cè)是
file1.txt，右側(cè)是file2.txt - 修改過的行左側(cè)行號變橙色，背景微黃，左邊有橙色豎條
- 被刪除的行畫了刪除線，紅色提示
- 新增的行綠色高亮，還有綠色邊框
- 每一行內(nèi)的變動字符都被精準(zhǔn)標(biāo)記
- 最下方還有說明圖例：紅=刪除｜綠=新增｜黃=修改
是不是比 Git 的命令行 diff 清晰多了？
完整代碼（可直接復(fù)制運行）
import difflib
import os
import webbrowser
from urllib.parse import urljoin, urlparse
def read_file(filepath):
"""讀取文件內(nèi)容，按行返回列表（每行保留換行符）"""
try:
with open(filepath, 'r', encoding='utf-8') as f:
lines = f.readlines()
return [line.rstrip('\n') for line in lines]
except Exception as e:
print(f"無法讀取文件: {filepath}, 錯誤: {e}")
return []
def highlight_line_diff(text1, text2):
"""對兩個字符串進行字符級差異高亮"""
sm = difflib.SequenceMatcher(None, text1, text2)
result1 = []
result2 = []
for tag, i1, i2, j1, j2 in sm.get_opcodes():
part1 = text1[i1:i2]
part2 = text2[j1:j2]
if tag == 'equal':
result1.append(part1)
result2.append(part2)
elif tag == 'delete':
result1.append(f'<span class="highlight-delete">{part1}</span>')
result2.append(part2)
elif tag == 'insert':
result1.append(part1)
result2.append(f'<span class="highlight-insert">{part2}</span>')
elif tag == 'replace':
result1.append(f'<span class="highlight-delete">{part1}</span>')
result2.append(f'<span class="highlight-insert">{part2}</span>')
return ''.join(result1), ''.join(result2)
def generate_beautiful_side_by_side_diff(file1_path, file2_path, open_in_browser, output_html="diff_comparison.html"):
"""生成美化版兩欄對比 HTML"""
lines1 = read_file(file1_path)
lines2 = read_file(file2_path)
filename1 = os.path.basename(file1_path)
filename2 = os.path.basename(file2_path)
matcher = difflib.SequenceMatcher(None, lines1, lines2)
blocks = matcher.get_grouped_opcodes(n=3)
table_rows = []
for group in blocks:
for tag, i1, i2, j1, j2 in group:
if tag == 'equal':
for line1, line2 in zip(lines1[i1:i2], lines2[j1:j2]):
hl_line1, hl_line2 = highlight_line_diff(line1, line2)
table_rows.append(f"""
<tr>
<td class="line-num">{i1 + 1}</td>
<td class="content left"><pre>{hl_line1 or ' '}</pre></td>
<td class="line-num">{j1 + 1}</td>
<td class="content right"><pre>{hl_line2 or ' '}</pre></td>
</tr>""")
i1 += 1; j1 += 1
elif tag == 'delete':
for line in lines1[i1:i2]:
hl_line, _ = highlight_line_diff(line, "")
table_rows.append(f"""
<tr>
<td class="line-num del">{i1 + 1}</td>
<td class="content left deleted"><pre>{hl_line or ' '}</pre></td>
<td class="line-num">-</td>
<td class="content right empty"><pre>-</pre></td>
</tr>""")
i1 += 1
elif tag == 'insert':
for line in lines2[j1:j2]:
_, hl_line = highlight_line_diff("", line)
table_rows.append(f"""
<tr>
<td class="line-num">-</td>
<td class="content left empty"><pre>-</pre></td>
<td class="line-num ins">{j1 + 1}</td>
<td class="content right added"><pre>{hl_line or ' '}</pre></td>
</tr>""")
j1 += 1
elif tag == 'replace':
max_len = max(i2 - i1, j2 - j1)
for k in range(max_len):
line1 = lines1[i1 + k] if i1 + k < i2 else ""
line2 = lines2[j1 + k] if j1 + k < j2 else ""
hl_line1, hl_line2 = highlight_line_diff(line1, line2)
lineno1 = str(i1 + k + 1) if i1 + k < i2 else "-"
lineno2 = str(j1 + k + 1) if j1 + k < j2 else "-"
cls1 = "replaced" if line1 else "empty"
cls2 = "replaced" if line2 else "empty"
table_rows.append(f"""
<tr>
<td class="line-num {cls1}">{lineno1}</td>
<td class="content left {cls1}"><pre>{hl_line1 or ' '}</pre></td>
<td class="line-num {cls2}">{lineno2}</td>
<td class="content right {cls2}"><pre>{hl_line2 or ' '}</pre></td>
</tr>""")
if not table_rows:
table_rows.append("""
<tr>
<td colspan="2" style="text-align:center; color:green;">? 兩文件內(nèi)容完全相同</td>
<td colspan="2" style="text-align:center; color:green;">? No differences found</td>
</tr>
""")
custom_css = """
<style>
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
background-color: #f8f9fa;
color: #333;
padding: 20px;
line-height: 1.6;
}
.container {
max-width: 1400px;
margin: 0 auto;
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
overflow: hidden;
}
header {
background: #2c3e50;
color: white;
padding: 15px 20px;
text-align: center;
}
header h1 {
margin: 0;
font-size: 1.5em;
}
.diff-table-container {
overflow-x: auto;
}
table.diff {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 14px;
}
table.diff th {
background: #34495e;
color: white;
padding: 10px 8px;
text-align: center;
position: sticky;
top: 0;
z-index: 10;
}
td.line-num {
width: 40px;
text-align: right;
font-weight: bold;
color: #777;
background: #f8f8f8;
padding: 6px 4px;
user-select: none;
white-space: nowrap;
font-family: monospace;
font-size: 13px;
}
td.line-num.del { color: #e74c3c; }
td.line-num.ins { color: #2ecc71; }
td.content {
width: 45%;
white-space: normal;
word-wrap: break-word;
word-break: break-word;
padding: 6px 8px;
vertical-align: top;
}
td.content pre {
margin: 0;
font-family: "Consolas", "Menlo", "Monaco", monospace;
font-size: 13px;
line-height: 1.5;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-word;
background: none;
border: none;
padding: 0;
}
table.diff tr:hover {
background-color: #f1f9ff;
}
td.deleted {
background-color: #fff8f8;
border-left: 3px solid #e74c3c;
}
td.added {
background-color: #f8fff8;
border-left: 3px solid #2ecc71;
}
td.replaced {
background-color: #fffff0;
border-left: 3px solid #f39c12;
}
td.empty {
color: #ccc;
font-style: italic;
}
.highlight-delete {
background-color: #ffebee;
text-decoration: line-through;
color: #c62828;
padding: 0 2px;
border-radius: 3px;
}
.highlight-insert {
background-color: #e8f5e8;
color: #2e7d32;
font-weight: bold;
padding: 0 2px;
border-radius: 3px;
}
</style>
"""
full_html = f"""<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文檔對比結(jié)果</title>
{custom_css}
</head>
<body>
<div class="container">
<header>
<h1>?? 文檔兩欄對比</h1>
<p>{filename1} <strong>vs</strong> {filename2}</p>
</header>
<div class="diff-table-container">
<table class="diff">
<thead>
<tr>
<th style="width:40px">行號</th>
<th style="width:45%">{filename1}</th>
<th style="width:40px">行號</th>
<th style="width:45%">{filename2}</th>
</tr>
</thead>
<tbody>
{''.join(table_rows)}
</tbody>
</table>
</div>
<div style="padding: 15px; font-size: 13px; color: #666; text-align: center; background: #f5f5f5;">
<strong>說明：</strong>
<span style="color: #e74c3c;">刪除</span> |
<span style="color: #2ecc71;">新增</span> |
<span style="color: #f39c12;">修改</span>
? 行內(nèi)變化已高亮
</div>
</div>
</body>
</html>"""
with open(output_html, 'w', encoding='utf-8') as f:
f.write(full_html)
print(f"? 美化版兩欄對比已生成: {os.path.abspath(output_html)}")
print(f"?? 請用瀏覽器打開查看優(yōu)化后的效果。")
if open_in_browser:
try:
abs_path = os.path.abspath(output_html)
file_url = 'file:///' + abs_path.replace('\\', '/') if os.name == 'nt' else urljoin('file:', urlparse(abs_path).path.replace(os.sep, '/'))
webbrowser.open(file_url)
print(f"?? 已自動打開瀏覽器預(yù)覽: {file_url}")
except Exception as e:
print(f"?? 瀏覽器打開失敗，請手動打開:\n {abs_path}")
# === 使用示例 ===
if __name__ == "__main__":
file1 = r"C:\Users\Administrator\Desktop\file2.txt"
file2 = r"C:\Users\Administrator\Desktop\file1.txt"
generate_beautiful_side_by_side_diff(file1, file2, True, "【美化版】兩欄對比結(jié)果.html")
結(jié)語
這個小工具雖然只有 300 多行代碼，但卻融合了文本處理、算法匹配、前端渲染和用戶體驗設(shè)計。它不僅實用，還能作為學(xué)習(xí) difflib 和 HTML/CSS 布局的優(yōu)秀范例。
到此這篇關(guān)于基于Python打造超漂亮的HTML兩欄文本對比工具的文章就介紹到這了,更多相關(guān)Python兩欄文本對比內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了python?PyQt5(自定義)信號與槽使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
python腳本監(jiān)控logstash進程并郵件告警實例
這篇文章主要介紹了python腳本監(jiān)控logstash進程并郵件告警實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-04-04
這篇文章主要為大家介紹了Python的裝飾器，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助，希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家詳細介紹了Python中兩個為面向?qū)ο缶幊烫峁┑膹姶蠊ぞ呓涌诤统橄蠡惖氖褂?感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
Python數(shù)學(xué)建模學(xué)習(xí)模擬退火算法整數(shù)規(guī)劃問題示例解析
整數(shù)規(guī)劃問題在工業(yè)、經(jīng)濟、國防、醫(yī)療等各行各業(yè)應(yīng)用十分廣泛，是指規(guī)劃中的變量（全部或部分）限制為整數(shù)，屬于離散優(yōu)化問題Discrete Optimization2021-10-10
pyarmor是一款用于加密和保護python腳本的工具,可以用于防止源代碼泄露,下面我們就來學(xué)習(xí)一下Python如何利用pyarmor庫來保護源代碼吧2024-11-11
OpenCV-Python實現(xiàn)懷舊濾鏡與連環(huán)畫濾鏡
很多時候通過ps可以做很多效果，今天我們來介紹使用OpenCV-Python實現(xiàn)懷舊濾鏡與連環(huán)畫濾鏡，具有一定的參考價值，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了python通過http上傳文件,在post請求中，用files參數(shù)來接受文件對象相關(guān)的參數(shù)，通過data/json參數(shù)接受post請求體的其他參數(shù)2021-07-07
本篇文章主要介紹了python3讀取MySQL-Front的MYSQL密碼的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
這篇文章主要介紹了python進行TCP端口掃描的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12