LNReader项目HTML标签渲染异常问题分析

问题现象

在LNReader阅读器中，用户发现部分轻小说章节内容中的HTML标签(如<i>、<b>等)未被正确渲染，而是直接以文本形式显示在阅读界面上。例如，<i>斜体文本</i>会显示为包含标签符号的文本，而非预期的斜体效果。

问题根源

经过技术分析，该问题并非LNReader阅读器本身的缺陷，而是源于内容源网站LightNovelPub的特殊处理方式。该网站出于某种原因，对HTML标签中的尖括号进行了转义处理，将<和>分别转换为<和>。这种转义行为导致阅读器无法正确识别这些标签为HTML标记，而是将其视为普通文本内容。

解决方案

针对这一问题，可以通过自定义JavaScript代码在客户端进行修正。以下是两种可行的解决方案：

方案一：针对性修复(推荐)

此方案专门针对常见的<i>和<b>标签进行修复，不会影响其他内容：

const c = document.querySelector("#LNReader-chapter");
c.innerHTML = c.innerHTML
  .replace(/\&lt;(\/)?i\&gt;/g, (a,g) => {return g ?"</i>":"<i>"})
  .replace(/\&lt;(\/)?b\&gt;/g, (a,g) => {return g ?"</b>":"<b>"});

方案二：通用性修复(谨慎使用)

此方案可以修复所有HTML标签，但会移除所有尖括号内的文本内容(包括非标签内容)：

const c = document.querySelector("#LNReader-chapter");
c.innerHTML = c.innerHTML.replace(/\<(\/)?(.*?)\>/g, (a,g,g2) => {
  return g ? `</${g2}>` : `<${g2}>`
});

技术说明

1. 正则表达式解析：

   • \<匹配转义后的左尖括号<
   • (\/)?匹配可选的斜杠(用于闭合标签)
   • (.*?)非贪婪匹配标签名称
   • \>匹配转义后的右尖括号>

2. 替换逻辑：

   • 将转义后的标签符号恢复为原始HTML标签
   • 保留标签结构，确保开闭标签对应

最佳实践建议

1. 优先使用针对性修复方案，避免意外修改非标签内容
2. 在插件层面实现此修复更为合适，可以统一处理特定源站的内容
3. 对于普通用户，建议等待插件更新或向源站反馈此问题

总结

HTML标签渲染异常问题在内容抓取类应用中较为常见，通常源于源站的特殊处理方式。通过客户端JavaScript进行内容修正是一种有效的临时解决方案，但从长远来看，在插件层面针对特定源站实现内容规范化处理才是最佳实践。