油壶test 放出优是那个优弧是弯曲的弧使用 diff-match-patch-go 包来实现两段 HTML 内容

test 放出

优是那个优

弧是弯曲的弧

使用 diff-match-patch-go 包来实现两段 HTML 内容的高亮差异，忽略 HTML 标签的代码，只显示 HTML 可显示的差异，然后输出的结果按 HTML 格式正常显示，可以按以下步骤操作：

用 diff 函数获取两段 HTML 内容的差异，忽略 HTML 标签代码。

import (
    "strings"
    dmp "github.com/sergi/go-diff/diffmatchpatch"
)

// 获取两段 HTML 内容的差异
func getDiff(left, right string) string {
    dmp := dmp.New()
    diffs := dmp.DiffMain(stripTags(left), stripTags(right), false)
    return dmp.DiffPrettyHtml(diffs)
}

// 通过正则去除 HTML 标签代码
func stripTags(str string) string {
    reg := regexp.MustCompile(`(?i)<[^>]*>`)
    stripped := reg.ReplaceAllString(str, "")
    return stripped
}

在 getDiff 函数中，使用 DiffPrettyHtml 函数将差异内容转换为 HTML 格式显示。

return dmp.DiffPrettyHtml(diffs)

这样得到的 HTML 内容会带有 <del> 和 <ins> 标签，分别表示被删除和插入的文本，这些标签可以通过 CSS 进行美化。

在 HTML 文件中添加 CSS 样式显示差异。

在 HTML 文件中添加以下 CSS 样式，用于美化 <del> 和 <ins> 标签。

<style>
  del {
    background-color: #ffd1d1;
    text-decoration: line-through;
  }
  ins {
    background-color: #ccffcc;
    text-decoration: underline;
  }
</style>

在 HTML 文件中调用 getDiff 函数，将差异渲染为 HTML 格式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML Diff</title>
    <style>
        del {
            background-color: #ffd1d1;
            text-decoration: line-through;
        }
        ins {
            background-color: #ccffcc;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>HTML Diff Example</h1>
    <h2>Original</h2>
    <p>Original HTML content goes here.</p>
    <h2>Modified</h2>
    <p>Modified HTML content goes here.</p>
    <h2>Diff</h2>
    <div>{{.Diff}}</div>
</body>
</html>

在上述示例中，{{.Diff}} 是使用 Go 模板渲染的占位符，它将被 getDiff 函数返回的 HTML 代码所填充。