山东大学软件学院2022级项目实训（五）

原创已于 2025-06-15 01:41:44 修改 · 658 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #powerpoint

于 2025-04-19 20:39:27 首次发布

山东大学软件学院2022级项目实训（五）

自定义调试工具：日志输出到页面

在开发过程中，调试信息的查看与输出是不可或缺的。为了方便实时查看调试信息，我编写了一个简单的日志工具，将调试信息输出到页面上的一个特定区域。

功能概述

该工具通过定义 window.log 函数，将调试日志动态输出到页面的 debugLog 元素中。日志内容可以是任意数据类型，工具会智能地处理对象和其他类型数据，确保输出的日志易于阅读和调试。

实现原理

HTML 结构

首先，在页面中添加一个 <div> 元素用于显示日志信息：

<div id="debugLog" style="border: 1px solid #ccc; padding: 10px; margin: 10px 0; background: #f7f7f7; font-family: monospace; font-size: 14px; white-space: pre-wrap;">
    [调试输出区]
</div>

此 div 元素具有边框、内边距和背景色，能够让日志内容显示更加清晰。

日志输出函数

定义 window.log 函数，实现日志输出功能：

window.log = function (...args) {
  const el = document.getElementById("debugLog");
  if (!el) return;

  const text = args.map(arg => {
    try {
      return typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg);
    } catch {
      return '[Unserializable]';
    }
  }).join(' ');

  el.textContent += text + '\n';
};

功能：此函数接受任意数量的参数，自动将对象转换为 JSON 格式，其他类型的参数转换为字符串。对于无法序列化的内容，输出 [Unserializable]。
日志显示：处理后的日志内容会被追加到页面的 debugLog 元素中，并且每条日志信息后会自动换行。

这个自定义的日志工具非常简单，但极大提升了调试效率。它能够在页面上清晰地展示不同类型的日志信息，尤其适用于需要实时查看调试内容的场景。

清理文档中的空行——踩过的坑和解决方案

引言

我们有时候需要对文档内容进行清理，特别是删除空行。为了实现这一目标，我使用了WPS Office的API来遍历文档段落并删除空行。然而，在实现这个功能时，我遇到了几个坑，今天我将与大家分享我的经验和解决方案。

问题 1：段落文本的读取失败

在最初的实现过程中，我尝试通过paragraph.Text获取段落文本，但遇到了文本读取失败的问题。很多段落返回了undefined或空字符串，这让我们无法获取到有效内容。

解决方案：

通过WPS API的Range属性来替代直接使用paragraph.Text获取段落文本。这是因为Range.Text可以更好地处理复杂格式的段落，确保文本内容的获取。

let paragraphText = paragraph.Range.Text;

问题 2：空行的删除

虽然段落内容成功获取，但问题在于删除空行时，我们不仅要删除那些没有任何内容的段落，还需要处理那些仅包含回车符、换行符、制表符等不可见字符的段落。初期的代码没有完全删除这些空段落，导致文档中依然存在不必要的空行。所以我想到用正则表示符来替换无效字符。

我一开始尝试了下面的代码，但是这样的结果是把所有的无效字符包括换行符都换成了单个空格，最后合并以后段落都合成了一段，中间仅仅用空格隔开，显然不符合要求。

 fullText = fullText.replace(/[\r\n\t\s]+/g, ' ').trim(); // 替换所有无效字符为单个空格，并去除首尾空白字符

最后我觉得全文修改思路不对，应该分段落处理文章，将空行对应的段落删除，即可实现去除空行的目的。

问题 3：API中段落删除逻辑的混乱

在实现删除空段落时，我尝试了多种方法，包括直接清空段落的文本，使用paragraph.Text = ""等方法。然而，这些操作并没有达到预期的效果，我意识到仅仅把段落变为“”不能删除段落。

解决方案：

通过对每一个段落检查，对于空段落用paragraph.Range.Delete()删除整个段落的文本，确保空段落被完全删除。

paragraph.Range.Delete();  // 删除段落的文本内容

问题 4：删除段落时索引变化

从提供的调试输出来看，我发现通过多次调用可以去除所有空行，但一次只能去除部分空行。

关键问题：
思考后我发现，问题在删除空段落之后，剩余的段落数量减少了，导致在下一次遍历时，后面的一个段落被跳过。具体来说，删除一个段落会导致文档的段落数量减少，而我在遍历时仍然根据原来的段落数量来处理。

解决方案：

可以在删除空段落后，更新段落集合的数量，并调整循环逻辑。
还有一个简单的解决方案是逆向遍历文档中的段落，这样删除段落时就不会影响后面的段落索引。

for (let i = 1; i <= paragraphs.Count; i++) //改为下面的逆序
for (let i = paragraphs.Count; i >= 1; i--)

最终代码实现

在完成上述步骤后，最终的代码实现如下：

async function removeEmptyLines() {
    window.log("开始清理文档");
    const app = wps.WpsApplication();
    const doc = app.ActiveDocument;
    const paragraphs = doc.Paragraphs;

    // 遍历所有段落
    for (let i = paragraphs.Count; i >= 1; i--) {
        const paragraph = paragraphs.Item(i);
        try {
            let paragraphText = paragraph.Range.Text;
            
            if (!paragraphText) {
                window.log(`段落 ${i} 获取文本失败`);
                continue;  // 如果没有文本内容，跳过该段落
            }

            window.log(`处理段落 ${i}, 原始内容："${paragraphText}"`);

            // 使用正则表达式替换掉回车符、换行符、制表符等不可见字符
            paragraphText = paragraphText.replace(/[\r\n\t\s]+/g, ' ').trim();

            // 检查段落是否为空，修正逻辑
            if (/^\s*$/.test(paragraphText)) {
                window.log(`删除空段落：${i}`);
                paragraph.Range.Delete();  // 删除段落的文本内容
            } else {
                window.log(`段落 ${i} 内容有效，不删除`);
            }
        } catch (error) {
            window.log(`处理段落 ${i} 时出错: ${error.message}`);
        }
    }
    window.log("文档已清理，空行已删除");
}