将带注释的Word文档改造成点击注释引用即可弹窗显示注释的HTML文档

阅读中国古籍电子书的时候，往往有很多注释。在正文和注释之间来回滚动页面是一件挺麻烦的事，比较方便的做法是将它编辑成通过点击注释引用即将注释弹出显示在引用所在位置的HTML文档，然后利用HTML文档制作成PDF或者epub文件，就比较便于阅读了。

例如下面这首诗，在Word文档中显示的样子：

将它改造成HTML文件，在浏览器中就变成了下面的样子：

本文就介绍快速批量实现这种转换的一个思路。

首先，在Word文档中要定义好样式。本文以诗标题样式为“标题 2”，诗的内容样式为“要点”，诗的注释样式为“正文”，并且每一条注释为一段，中间不得用enter键分段（如确需分行，可用shift+enter进行软分行）。

然后，我们可以编写下面的VBA，对段落进行改造：

Sub 将Word文本改造为带HTML标记的文本()Dim i%, j%On Error Resume NextWith Selection.StartOf wdStoryWith .Find.Forward = True.MatchWildcards = True' 循环查找注释引用进行处理Do' 注释引用形式为①-⑨，如果有更大的编号，可以从①开始再次循环使用' 只要注释引用与注释文本顺序能够一一对应，编号并没有什么关系Found = .Execute(FindText:="[①-⑨]")commentRef = Selection.Range.TextIf Selection.Style = "标题 2" Then' 文档中标题与正文连续编号的i = i + 1' 将①-⑨形式的编号改成#1-#9形式的对应编号，防止查找陷入死循环' 之所以用①-⑨编号，是因为像下面这样利用unicode编码在带圈序号' 与阿拉伯数字之间转换极为方便commentRef = "#" & ChrW(AscW(commentRef) - 9263)' 将带圈数字注释引用改为#加阿拉伯数字形式的注释引用Selection.Range.Text = "<a id=""commentRef" & Trim(Str(i)) & """ href=""#"" class=""commentRef""" + _" data-related-div=""commentDiv" & Trim(Str(i)) & """>" & commentRef & "</a>"' 如果是“标题 2”样式的段落，用<h2>标签包裹起来para_text = Selection.Paragraphs(1).Range.Text' 如果段落中有多个注释，已经在第一个注释处理时包裹了<h2>标签的，不再包裹If Left(para_text, 3) <> "<h2" ThenSelection.Paragraphs(1).Range.Text = "<h2>" & para_text & "</h2>" & vbCrLfEnd IfElseIf Selection.Style = "要点" Theni = i + 1commentRef = "#" & ChrW(AscW(commentRef) - 9263)Selection.Range.Text = "<a id=""commentRef" & Trim(Str(i)) & """ href=""#"" class=""commentRef""" + _" data-related-div=""commentDiv" & Trim(Str(i)) & """>" & commentRef & "</a>"' 对于样式为“要点”的段落，用class为mainPoint的<div>标签包裹para_text = Selection.Paragraphs(1).Range.TextIf Left(para_text, 4) <> "<div" ThenSelection.Paragraphs(1).Range.Text = "<div class=""mainPoint"">" & para_text & "</div>" & vbCrLfEnd IfElseIf Selection.Style = "正文" Then' 注释单独连续编号的j = j + 1Selection.Paragraphs(1).Range.Text = "<div id=""commentDiv" & Trim(Str(j)) & """ class=""commentDiv"">" & _"<a class=""commentRef"" href=""#commentRef" & Trim(Str(j)) & """>" & "#" & ChrW(AscW(commentRef) - 9263) & "</a>" & _Replace(Selection.Paragraphs(1).Range.Text, commentRef, "") & "</div>" & vbCrLfEnd IfLoop While Found '直至找不到注释引用停止循环End WithEnd With
End Sub

运行以上宏，Word文档中的文本成了下面这样（为了演示注释引用可以重复用①-⑨进行编号，只要顺序能够一一对应即可，故意将诗歌内容和注释内容各重复了一次）：

<h2>斗鸡<a id="commentRef1" href="#" class="commentRef" data-related-div="commentDiv1">#1</a>
</h2>
<div class="mainPoint">游目极妙伎，倾听厌宫商<a id="commentRef2" href="#" class="commentRef" data-related-div="commentDiv2">#2</a>。主人寂无为，众宾进乐方<a id="commentRef3" href="#" class="commentRef" data-related-div="commentDiv3">#3</a>。长筵坐戏客，斗鸡观闲房<a id="commentRef4" href="#" class="commentRef" data-related-div="commentDiv4">#4</a>。群雄正翕赫，双翅自飞扬<a id="commentRef5" href="#" class="commentRef" data-related-div="commentDiv5">#5</a>。振羽激流风，悍目发朱光<a id="commentRef6" href="#" class="commentRef" data-related-div="commentDiv6">#6</a>。觜落轻毛散，严距往往伤<a id="commentRef7" href="#" class="commentRef" data-related-div="commentDiv7">#7</a>。长鸣入青云，扇翼独翱翔<a id="commentRef8" href="#" class="commentRef" data-related-div="commentDiv8">#8</a>。愿蒙狸膏助，长得擅此场<a id="commentRef9" href="#" class="commentRef" data-related-div="commentDiv9">#9</a>。
</div>
<div class="mainPoint">游目极妙伎，倾听厌宫商<a id="commentRef10" href="#" class="commentRef" data-related-div="commentDiv10">#2</a>。主人寂无为，众宾进乐方<a id="commentRef11" href="#" class="commentRef" data-related-div="commentDiv11">#3</a>。长筵坐戏客，斗鸡观闲房<a id="commentRef12" href="#" class="commentRef" data-related-div="commentDiv12">#4</a>。群雄正翕赫，双翅自飞扬<a id="commentRef13" href="#" class="commentRef" data-related-div="commentDiv13">#5</a>。振羽激流风，悍目发朱光<a id="commentRef14" href="#" class="commentRef" data-related-div="commentDiv14">#6</a>。觜落轻毛散，严距往往伤<a id="commentRef15" href="#" class="commentRef" data-related-div="commentDiv15">#7</a>。长鸣入青云，扇翼独翱翔<a id="commentRef16" href="#" class="commentRef" data-related-div="commentDiv16">#8</a>。愿蒙狸膏助，长得擅此场<a id="commentRef17" href="#" class="commentRef" data-related-div="commentDiv17">#9</a>。
</div>
<div id="commentDiv1" class="commentDiv"><a class="commentRef" href="#commentRef1">#1</a>曹操统一北方后以邺城（今河北省临漳县邺城镇）为都，曹植与其兄曹丕以贵公子身份，与陈琳、王粲、徐幹、阮瑀、应玚、刘桢等建安诸子，经常相聚游园饮宴，诗赋唱和。当时流行斗鸡游戏，在一次斗鸡游戏后各有所作。这是曹植作的诗。现存的还有刘桢、应玚的同题诗。此诗的写作时间大约在建安十六年（211年）前后。前人有谓作于魏明帝筑斗鸡台的太和中，误；盖其时刘桢、应玚早已逝世；近人或谓作于建安二十五年前，亦不准确；盖刘桢、应玚、徐幹、陈琳于建安二十二年（217年）已死于大瘟疫，其时建安七子俱已亡故，此诗之作不会迟于邺下文人集团聚会活动之时。据现存建安诸子作品，他们的聚会活动主要在建安十六年曹丕封五官中郎将、丞相副前后一、二年，以后丕、植争嗣矛盾激化，建安文人分属丕党、植党，集体活动逐渐减少，如应玚、刘桢即分属两党。应玚《斗鸡》诗有“兄弟游戏场，命驾迎众宾”两句，既称“兄弟”和“众宾”，据此推想，此诗也可能作于曹丕任五官中郎将之前或当年。据以上考察，可信此诗是曹植的早期诗作，即十九岁左右的作品。全诗描写斗鸡游戏的热烈场面，对斗鸡的描写细致、传神，巧用比喻和夸饰，显示出青年作者的才华，也展示了当时贵公子生活和文人文艺活动的一个生动的镜头。
</div>
<div id="commentDiv2" class="commentDiv"><a class="commentRef" href="#commentRef2">#2</a>〔游目二句〕游目：游古通流，流目即放目随意观望。极：穷尽。妙伎：优美的舞伎。伎，古代女歌舞艺人。厌：倦。宫商：音调名，代指乐曲。二句意为看遍了舞女优美的舞蹈，听厌了音乐的曲调。
</div>
<div id="commentDiv3" class="commentDiv"><a class="commentRef" href="#commentRef3">#3</a>〔主人〕指曹丕、曹植兄弟。〔无为〕无事做。〔乐方〕娱乐方式。
</div>
<div id="commentDiv4" class="commentDiv"><a class="commentRef" href="#commentRef4">#4</a>〔长筵〕筵，竹席。古人席地而坐，地上铺竹席称筵，筵上再铺一重称席，筵长，席短，故称长筵。〔戏客〕参加游戏的宾客。〔闲房〕殿旁两侧空房。闲，静也。观闲，丁晏《曹集铨评》（以下简称丁本）作“闲观”，《艺文类聚》作“閒观”，宋刊本《曹子建文集》（以下简称宋本）闲作间，闲间古通，间为闲的异体，今规范字为闲。斗鸡观闲房，即在殿房旁空房观斗鸡。
</div>
<div id="commentDiv5" class="commentDiv"><a class="commentRef" href="#commentRef5">#5</a>〔翕（xī）赫〕盛貌，形容斗鸡气势高昂。〔双翅〕丁本作双翘，《艺文类聚》作双翅，按《说文解字》：“翘，尾长毛也。”双翘则欠通，故据《艺文类聚》改。〔飞扬〕形容双翅羽毛竖立若飞。
</div>
<div id="commentDiv6" class="commentDiv"><a class="commentRef" href="#commentRef6">#6</a>〔振羽二句〕激流风，丁本原作“邀清风”，《艺文类聚》作“激流风”。案此句应为挥羽激流风。挥羽，振动羽毛。激，发也。流风，急风。〔悍目〕凶悍的目光。二句意为振动羽毛激起急风，凶悍的目光发出红色光芒。
</div>
<div id="commentDiv7" class="commentDiv"><a class="commentRef" href="#commentRef7">#7</a>〔觜落〕觜同“嘴”。斗鸡以尖嘴相啄，乃至伤损脱落。〔轻毛〕柔细的毛散乱脱落。〔严距〕古代斗鸡用锋利的金属附于鸡爪，斗时用以刺伤对方，又称金距。
</div>
<div id="commentDiv8" class="commentDiv"><a class="commentRef" href="#commentRef8">#8</a>〔长鸣入青云〕斗胜的鸡先鸣，鸣声高昂。此处夸张地形容其响声直彻云霄。〔扇翼〕扇同“搧”，搧动羽翼。〔翱翔〕本义是禽鸟的飞翔，亦指游逛徘徊，这里指自得地绕场急走。
</div>
<div id="commentDiv9" class="commentDiv"><a class="commentRef" href="#commentRef9">#9</a>〔愿蒙二句〕狸膏：黄鼠狼的油膏。丁晏《事类赋注》引《庄子》逸篇：“羊沟之鸡，时以胜人者，以狸膏涂其头也。”盖鸡畏狸，凃狸膏可退敌。长，宋本作“常”。擅，专也。二句意为希望有狸膏的帮助而专擅于斗鸡场。
</div>
<div id="commentDiv10" class="commentDiv"><a class="commentRef" href="#commentRef10">#2</a>〔游目二句〕游目：游古通流，流目即放目随意观望。极：穷尽。妙伎：优美的舞伎。伎，古代女歌舞艺人。厌：倦。宫商：音调名，代指乐曲。二句意为看遍了舞女优美的舞蹈，听厌了音乐的曲调。
</div>
<div id="commentDiv11" class="commentDiv"><a class="commentRef" href="#commentRef11">#3</a>〔主人〕指曹丕、曹植兄弟。〔无为〕无事做。〔乐方〕娱乐方式。
</div>
<div id="commentDiv12" class="commentDiv"><a class="commentRef" href="#commentRef12">#4</a>〔长筵〕筵，竹席。古人席地而坐，地上铺竹席称筵，筵上再铺一重称席，筵长，席短，故称长筵。〔戏客〕参加游戏的宾客。〔闲房〕殿旁两侧空房。闲，静也。观闲，丁晏《曹集铨评》（以下简称丁本）作“闲观”，《艺文类聚》作“閒观”，宋刊本《曹子建文集》（以下简称宋本）闲作间，闲间古通，间为闲的异体，今规范字为闲。斗鸡观闲房，即在殿房旁空房观斗鸡。
</div>
<div id="commentDiv13" class="commentDiv"><a class="commentRef" href="#commentRef13">#5</a>〔翕（xī）赫〕盛貌，形容斗鸡气势高昂。〔双翅〕丁本作双翘，《艺文类聚》作双翅，按《说文解字》：“翘，尾长毛也。”双翘则欠通，故据《艺文类聚》改。〔飞扬〕形容双翅羽毛竖立若飞。
</div>
<div id="commentDiv14" class="commentDiv"><a class="commentRef" href="#commentRef14">#6</a>〔振羽二句〕激流风，丁本原作“邀清风”，《艺文类聚》作“激流风”。案此句应为挥羽激流风。挥羽，振动羽毛。激，发也。流风，急风。〔悍目〕凶悍的目光。二句意为振动羽毛激起急风，凶悍的目光发出红色光芒。
</div>
<div id="commentDiv15" class="commentDiv"><a class="commentRef" href="#commentRef15">#7</a>〔觜落〕觜同“嘴”。斗鸡以尖嘴相啄，乃至伤损脱落。〔轻毛〕柔细的毛散乱脱落。〔严距〕古代斗鸡用锋利的金属附于鸡爪，斗时用以刺伤对方，又称金距。
</div>
<div id="commentDiv16" class="commentDiv"><a class="commentRef" href="#commentRef16">#8</a>〔长鸣入青云〕斗胜的鸡先鸣，鸣声高昂。此处夸张地形容其响声直彻云霄。〔扇翼〕扇同“搧”，搧动羽翼。〔翱翔〕本义是禽鸟的飞翔，亦指游逛徘徊，这里指自得地绕场急走。
</div>
<div id="commentDiv17" class="commentDiv"><a class="commentRef" href="#commentRef17">#9</a>〔愿蒙二句〕狸膏：黄鼠狼的油膏。丁晏《事类赋注》引《庄子》逸篇：“羊沟之鸡，时以胜人者，以狸膏涂其头也。”盖鸡畏狸，凃狸膏可退敌。长，宋本作“常”。擅，专也。二句意为希望有狸膏的帮助而专擅于斗鸡场。
</div>

下面再准备一个HTML模板，内容如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" clickable="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 定义浮动框的样式 */#floatingBox {position: absolute;background-color: white;border: 1px solid gray;padding: 10px;z-index: 999;}/* 定义标题2段落的样式 */h2 {font-size:3em;}/* 定义诗歌内容段落的样式 */.mainPoint{font-size:2em;font-weight:bold;}/* 定义注释段落的样式 */.commentDiv{font-size:1.5em;}/* 注释引用以上标样式显示 */a.commentRef{vertical-align: super;}</style>
</head><body><!--此处插入在Word中用VBA处理过的文本--><div id="floatingBox" style="display:none"></div><script>// 获取浮动框的DOM元素const floatingBox = document.getElementById('floatingBox');// 获取所有带有 commentRef 类的a标签元素const commentRefs = document.querySelectorAll('.commentRef');// 获取所有带有 commentDiv 类的div标签元素const commentDivs = document.querySelectorAll('.commentDiv');// 遍历每个a标签，添加点击事件监听器commentRefs.forEach(function (link) {link.addEventListener('click', function (event) {// 阻止a标签默认的跳转行为event.preventDefault();// 获取当前a标签关联的div的idconst relatedDivId = link.dataset.relatedDiv;// 根据id获取对应的div元素const relatedDiv = document.getElementById(relatedDivId);// 获取要显示的文字内容const text = relatedDiv.textContent;// 设置浮动框的内容floatingBox.textContent = text;// 设置浮动框显示并定位到点击位置floatingBox.style.display = 'block';floatingBox.style.left = event.pageX + 'px';floatingBox.style.top = event.pageY + 'px';});});// 给浮动框添加点击事件监听器，点击浮动框可隐藏浮动框floatingBox.addEventListener('click', function (event) {// 阻止事件冒泡，避免影响后续查找对应的a标签逻辑event.stopPropagation();floatingBox.style.display = 'none';});</script>
</body></html>

当然，如果最后要做成epub文件，以上HTML文档中的样式定义部分应当抽出来做成单独文件，在HTML页面中加以引用即可。样式文件的内容也可以根据自己的喜好自行定义。接下来复制在Word文档中用VBA处理后的文本，粘贴到上面的HTML模板中注释“”的位置，即可大功告成。本文用于示例的诗替换后的最终内容如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" clickable="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 定义浮动框的样式 */#floatingBox {position: absolute;background-color: white;border: 1px solid gray;padding: 10px;z-index: 999;}h2 {font-size:3em;}.mainPoint{font-size:2em;font-weight:bold;}.commentDiv{font-size:1.5em;}a.commentRef{vertical-align: super;}</style>
</head><body><h2>斗鸡<a id="commentRef1" href="#" class="commentRef" data-related-div="commentDiv1">#1</a>
</h2>
<div class="mainPoint">游目极妙伎，倾听厌宫商<a id="commentRef2" href="#" class="commentRef" data-related-div="commentDiv2">#2</a>。主人寂无为，众宾进乐方<a id="commentRef3" href="#" class="commentRef" data-related-div="commentDiv3">#3</a>。长筵坐戏客，斗鸡观闲房<a id="commentRef4" href="#" class="commentRef" data-related-div="commentDiv4">#4</a>。群雄正翕赫，双翅自飞扬<a id="commentRef5" href="#" class="commentRef" data-related-div="commentDiv5">#5</a>。振羽激流风，悍目发朱光<a id="commentRef6" href="#" class="commentRef" data-related-div="commentDiv6">#6</a>。觜落轻毛散，严距往往伤<a id="commentRef7" href="#" class="commentRef" data-related-div="commentDiv7">#7</a>。长鸣入青云，扇翼独翱翔<a id="commentRef8" href="#" class="commentRef" data-related-div="commentDiv8">#8</a>。愿蒙狸膏助，长得擅此场<a id="commentRef9" href="#" class="commentRef" data-related-div="commentDiv9">#9</a>。
</div>
<div class="mainPoint">游目极妙伎，倾听厌宫商<a id="commentRef10" href="#" class="commentRef" data-related-div="commentDiv10">#2</a>。主人寂无为，众宾进乐方<a id="commentRef11" href="#" class="commentRef" data-related-div="commentDiv11">#3</a>。长筵坐戏客，斗鸡观闲房<a id="commentRef12" href="#" class="commentRef" data-related-div="commentDiv12">#4</a>。群雄正翕赫，双翅自飞扬<a id="commentRef13" href="#" class="commentRef" data-related-div="commentDiv13">#5</a>。振羽激流风，悍目发朱光<a id="commentRef14" href="#" class="commentRef" data-related-div="commentDiv14">#6</a>。觜落轻毛散，严距往往伤<a id="commentRef15" href="#" class="commentRef" data-related-div="commentDiv15">#7</a>。长鸣入青云，扇翼独翱翔<a id="commentRef16" href="#" class="commentRef" data-related-div="commentDiv16">#8</a>。愿蒙狸膏助，长得擅此场<a id="commentRef17" href="#" class="commentRef" data-related-div="commentDiv17">#9</a>。
</div>
<div id="commentDiv1" class="commentDiv"><a class="commentRef" href="#commentRef1">#1</a>曹操统一北方后以邺城（今河北省临漳县邺城镇）为都，曹植与其兄曹丕以贵公子身份，与陈琳、王粲、徐幹、阮瑀、应玚、刘桢等建安诸子，经常相聚游园饮宴，诗赋唱和。当时流行斗鸡游戏，在一次斗鸡游戏后各有所作。这是曹植作的诗。现存的还有刘桢、应玚的同题诗。此诗的写作时间大约在建安十六年（211年）前后。前人有谓作于魏明帝筑斗鸡台的太和中，误；盖其时刘桢、应玚早已逝世；近人或谓作于建安二十五年前，亦不准确；盖刘桢、应玚、徐幹、陈琳于建安二十二年（217年）已死于大瘟疫，其时建安七子俱已亡故，此诗之作不会迟于邺下文人集团聚会活动之时。据现存建安诸子作品，他们的聚会活动主要在建安十六年曹丕封五官中郎将、丞相副前后一、二年，以后丕、植争嗣矛盾激化，建安文人分属丕党、植党，集体活动逐渐减少，如应玚、刘桢即分属两党。应玚《斗鸡》诗有“兄弟游戏场，命驾迎众宾”两句，既称“兄弟”和“众宾”，据此推想，此诗也可能作于曹丕任五官中郎将之前或当年。据以上考察，可信此诗是曹植的早期诗作，即十九岁左右的作品。全诗描写斗鸡游戏的热烈场面，对斗鸡的描写细致、传神，巧用比喻和夸饰，显示出青年作者的才华，也展示了当时贵公子生活和文人文艺活动的一个生动的镜头。
</div>
<div id="commentDiv2" class="commentDiv"><a class="commentRef" href="#commentRef2">#2</a>〔游目二句〕游目：游古通流，流目即放目随意观望。极：穷尽。妙伎：优美的舞伎。伎，古代女歌舞艺人。厌：倦。宫商：音调名，代指乐曲。二句意为看遍了舞女优美的舞蹈，听厌了音乐的曲调。
</div>
<div id="commentDiv3" class="commentDiv"><a class="commentRef" href="#commentRef3">#3</a>〔主人〕指曹丕、曹植兄弟。〔无为〕无事做。〔乐方〕娱乐方式。
</div>
<div id="commentDiv4" class="commentDiv"><a class="commentRef" href="#commentRef4">#4</a>〔长筵〕筵，竹席。古人席地而坐，地上铺竹席称筵，筵上再铺一重称席，筵长，席短，故称长筵。〔戏客〕参加游戏的宾客。〔闲房〕殿旁两侧空房。闲，静也。观闲，丁晏《曹集铨评》（以下简称丁本）作“闲观”，《艺文类聚》作“閒观”，宋刊本《曹子建文集》（以下简称宋本）闲作间，闲间古通，间为闲的异体，今规范字为闲。斗鸡观闲房，即在殿房旁空房观斗鸡。
</div>
<div id="commentDiv5" class="commentDiv"><a class="commentRef" href="#commentRef5">#5</a>〔翕（xī）赫〕盛貌，形容斗鸡气势高昂。〔双翅〕丁本作双翘，《艺文类聚》作双翅，按《说文解字》：“翘，尾长毛也。”双翘则欠通，故据《艺文类聚》改。〔飞扬〕形容双翅羽毛竖立若飞。
</div>
<div id="commentDiv6" class="commentDiv"><a class="commentRef" href="#commentRef6">#6</a>〔振羽二句〕激流风，丁本原作“邀清风”，《艺文类聚》作“激流风”。案此句应为挥羽激流风。挥羽，振动羽毛。激，发也。流风，急风。〔悍目〕凶悍的目光。二句意为振动羽毛激起急风，凶悍的目光发出红色光芒。
</div>
<div id="commentDiv7" class="commentDiv"><a class="commentRef" href="#commentRef7">#7</a>〔觜落〕觜同“嘴”。斗鸡以尖嘴相啄，乃至伤损脱落。〔轻毛〕柔细的毛散乱脱落。〔严距〕古代斗鸡用锋利的金属附于鸡爪，斗时用以刺伤对方，又称金距。
</div>
<div id="commentDiv8" class="commentDiv"><a class="commentRef" href="#commentRef8">#8</a>〔长鸣入青云〕斗胜的鸡先鸣，鸣声高昂。此处夸张地形容其响声直彻云霄。〔扇翼〕扇同“搧”，搧动羽翼。〔翱翔〕本义是禽鸟的飞翔，亦指游逛徘徊，这里指自得地绕场急走。
</div>
<div id="commentDiv9" class="commentDiv"><a class="commentRef" href="#commentRef9">#9</a>〔愿蒙二句〕狸膏：黄鼠狼的油膏。丁晏《事类赋注》引《庄子》逸篇：“羊沟之鸡，时以胜人者，以狸膏涂其头也。”盖鸡畏狸，凃狸膏可退敌。长，宋本作“常”。擅，专也。二句意为希望有狸膏的帮助而专擅于斗鸡场。
</div>
<div id="commentDiv10" class="commentDiv"><a class="commentRef" href="#commentRef10">#2</a>〔游目二句〕游目：游古通流，流目即放目随意观望。极：穷尽。妙伎：优美的舞伎。伎，古代女歌舞艺人。厌：倦。宫商：音调名，代指乐曲。二句意为看遍了舞女优美的舞蹈，听厌了音乐的曲调。
</div>
<div id="commentDiv11" class="commentDiv"><a class="commentRef" href="#commentRef11">#3</a>〔主人〕指曹丕、曹植兄弟。〔无为〕无事做。〔乐方〕娱乐方式。
</div>
<div id="commentDiv12" class="commentDiv"><a class="commentRef" href="#commentRef12">#4</a>〔长筵〕筵，竹席。古人席地而坐，地上铺竹席称筵，筵上再铺一重称席，筵长，席短，故称长筵。〔戏客〕参加游戏的宾客。〔闲房〕殿旁两侧空房。闲，静也。观闲，丁晏《曹集铨评》（以下简称丁本）作“闲观”，《艺文类聚》作“閒观”，宋刊本《曹子建文集》（以下简称宋本）闲作间，闲间古通，间为闲的异体，今规范字为闲。斗鸡观闲房，即在殿房旁空房观斗鸡。
</div>
<div id="commentDiv13" class="commentDiv"><a class="commentRef" href="#commentRef13">#5</a>〔翕（xī）赫〕盛貌，形容斗鸡气势高昂。〔双翅〕丁本作双翘，《艺文类聚》作双翅，按《说文解字》：“翘，尾长毛也。”双翘则欠通，故据《艺文类聚》改。〔飞扬〕形容双翅羽毛竖立若飞。
</div>
<div id="commentDiv14" class="commentDiv"><a class="commentRef" href="#commentRef14">#6</a>〔振羽二句〕激流风，丁本原作“邀清风”，《艺文类聚》作“激流风”。案此句应为挥羽激流风。挥羽，振动羽毛。激，发也。流风，急风。〔悍目〕凶悍的目光。二句意为振动羽毛激起急风，凶悍的目光发出红色光芒。
</div>
<div id="commentDiv15" class="commentDiv"><a class="commentRef" href="#commentRef15">#7</a>〔觜落〕觜同“嘴”。斗鸡以尖嘴相啄，乃至伤损脱落。〔轻毛〕柔细的毛散乱脱落。〔严距〕古代斗鸡用锋利的金属附于鸡爪，斗时用以刺伤对方，又称金距。
</div>
<div id="commentDiv16" class="commentDiv"><a class="commentRef" href="#commentRef16">#8</a>〔长鸣入青云〕斗胜的鸡先鸣，鸣声高昂。此处夸张地形容其响声直彻云霄。〔扇翼〕扇同“搧”，搧动羽翼。〔翱翔〕本义是禽鸟的飞翔，亦指游逛徘徊，这里指自得地绕场急走。
</div>
<div id="commentDiv17" class="commentDiv"><a class="commentRef" href="#commentRef17">#9</a>〔愿蒙二句〕狸膏：黄鼠狼的油膏。丁晏《事类赋注》引《庄子》逸篇：“羊沟之鸡，时以胜人者，以狸膏涂其头也。”盖鸡畏狸，凃狸膏可退敌。长，宋本作“常”。擅，专也。二句意为希望有狸膏的帮助而专擅于斗鸡场。
</div><div id="floatingBox" style="display:none"></div><script>// 获取浮动框的DOM元素const floatingBox = document.getElementById('floatingBox');// 获取所有带有 commentRef 类的a标签元素const commentRefs = document.querySelectorAll('.commentRef');// 获取所有带有 commentDiv 类的div标签元素const commentDivs = document.querySelectorAll('.commentDiv');// 遍历每个a标签，添加点击事件监听器commentRefs.forEach(function (link) {link.addEventListener('click', function (event) {// 阻止a标签默认的跳转行为event.preventDefault();// 获取当前a标签关联的div的idconst relatedDivId = link.dataset.relatedDiv;// 根据id获取对应的div元素const relatedDiv = document.getElementById(relatedDivId);// 获取要显示的文字内容const text = relatedDiv.textContent;// 设置浮动框的内容floatingBox.textContent = text;// 设置浮动框显示并定位到点击位置floatingBox.style.display = 'block';floatingBox.style.left = event.pageX + 'px';floatingBox.style.top = event.pageY + 'px';});});// 给浮动框添加点击事件监听器，点击浮动框可隐藏浮动框floatingBox.addEventListener('click', function (event) {// 阻止事件冒泡，避免影响后续查找对应的a标签逻辑event.stopPropagation();floatingBox.style.display = 'none';});</script>
</body></html>

前面处理后的注释引用，如果不喜欢这个样式，也可以用VBA替换回带圈数字样式，但是带圈数字编号太大时比较麻烦（曹植集注中有的诗注释达到了六七十条），不如只利用查找替换将“#”删掉。如果注释太多编号数量超过Integer数据类型的范围（可能性约等于0），可以将VBA代码中的i，j定义为Long数据类型。

因为本文是由于编辑诗歌电子书引发的，如果点赞超过十个，我就在这个编程序的平台放一首自己写的长诗。☺