JavaScript 正则表达式测试器

• 下载源代码文件 - 8.06 Kb

引言

这个方便的实用程序使用 JavaScript 在浏览器中测试 JavaScript 正则表达式。它的界面与其他正则表达式测试工具类似，但与那些工具不同的是，它测试的是 JavaScript 中实现的正则表达式。

背景

我发现自己经常编写客户端和服务器端都使用正则表达式进行文本解析或输入验证的 JavaScript 代码。然而，由于正则表达式通常会变得非常复杂，我需要一个可靠的工具来测试我编写的表达式，以确保我得到预期的结果。虽然有很多正则表达式测试工具，但没有一个专门用于测试 JavaScript 中实现的正则表达式。所以，我从这些工具的界面中复制了我喜欢的部分，并用 HTML 和 JavaScript 编写了自己的工具。这使得它成为测试 JavaScript 正则表达式的完美工具，因为它就是用 JavaScript 编写并在 JavaScript 中执行的。

我分享这些代码有几个原因。首先是让其他人找到并使用它。我认为它很有用，而且您也可能会觉得它有用。我已经用过非常大的文本块，大于一兆字节，并且发现在测试环境中它速度相当快。

我还想听听关于它的反馈，什么是有用的，什么是不错的，哪些部分很糟糕——但前提是您要告诉我您认为如何才能改进。由于我现在不再编写许多复杂的正则表达式，所以我没有像以前那样强烈的理由来使用这个工具。我想听听那些能够并且正在使用它的人的意见。

使用代码

在顶部输入正则表达式，然后在左下角输入要作用于该正则表达式的文本。按“匹配”按钮。

其他选项包括替换匹配的文本（使用 $1、$2 等进行反向引用）。

JavaScript 允许使用一些选项，我已经尽可能地暴露了它们。正则表达式可以以文本格式编写，例如 `re = new RegExp("ab+c")`，或者作为字面量，例如 `re = /ab+c/`，所以我两者都支持。JavaScript 中支持正则表达式的标志还有“忽略大小写”、“全局”和“多行”，它们在界面右上角的复选框中公开。使用“替换”时，单击“替换字符串”可编辑将要替换的内容。单击“清除”可清除输出，单击“RegExTest”可显示 JavaScript 对象表示法 (JSON) 中 RegExTest 对象的当前内容，或者有些人称之为“对象字面量”。

技术细节

所有数据都存储在名为“RegExTest”的 JavaScript 对象中。有三个函数作用于此对象，分别对应三个顶部按钮。这些是函数而不是方法，因为我想让数据可以导出（通过 JSON），以便可以将其保存到外部（文件、数据库等）供我以后处理，但这本身是一个话题，将在另一篇文章中讨论。

此界面使用框架，因此每个框架都需要能够将其“状态”传达给 RegExTest 对象，以便程序能够正常工作。为此，我已经将所有权限委托给了顶部框架。其他框架仅仅是向用户显示数据的地方。也就是说，每个框架内置的功能尽可能少。大部分功能实际上位于顶部框架。这样做部分是为了便于通过 JSON 进行导入/导出，也是为了简化任何框架中所需的代码量。

为了将框架中的数据获取到对象中，每个窗体元素中的每个事件都会使用 CopyUp() 将数据复制到顶层 RegExTest 对象中。每个页面还有一个 CopyDown() 函数，它将数据从 RegExTest 对象复制并放置到每个框架的窗体中。这是一个例子。

function copyDown() {
    document.local.TheText.value = window.top.RegExTest.theText;
};
function copyUp() {
    window.top.RegExTest.theText = document.local.TheText.value;
};

您可以将 CopyUp() 和 CopyDown() 函数视为每个框架的方法。这使得以下代码成为可能，并且在执行匹配、替换或拆分之前，以及在保存 RegExTest 对象之前，都会使用 top.CopyUp()。

// Walk through all of the frames starting at the very top level, which this is
function CopyUp() {
    if (top.frames.length) {
        CopyUpFrames(top.frames);
    };
};

 // Walks through all of the frames starting at the very top level
function CopyUpFrames(theFrame) {
    for (i=0;i<theFrame.length;I++)
        // Call copyUp() in each page of the frameset
        if (theFrame[i].copyUp) {
            theFrame[i].copyUp();
        };
        // if the page contains frames, walk through those too
        if (theFrame[i].frames.length) {
            CopyUpFrames(theFrame[i].frames);
        };
    };
};

在执行匹配、替换或拆分后会调用 CopyDown() 函数，并且在从磁盘或数据库记录加载 RegExTest 对象后也会调用它。

文件内容

文件	目录
regex2.htm	父框架，RegExTest 对象
regex2.js	此脚本文件中的核心功能，即执行匹配、替换和拆分的函数。
support/support.js	顶层 CopyUp() 和 CopyDown() 函数，以及 CopyUpFrames() 和 CopyDownFrames() 函数。
support/flags.htm	执行匹配、替换和拆分的按钮，以及“忽略大小写”、“全局”和“多行”标志的复选框。
support/RegExInput.htm	用于显示和编辑要执行的正则表达式（字符串或字面量）的文本框。
support/ReplaceString.htm	用于显示和编辑执行替换时要使用的替换文本的文本框。
support/input.htm	用于显示和编辑正则表达式将要对其执行操作的文本的文本框。
support/output.htm	显示在文本上执行正则表达式后发生情况的区域。
support/JSON.js	包含将对象转换为字符串的函数，该字符串可以轻松导出然后重新导入。

好坏之分

我知道很多人不喜欢 Eval()，但在这个场景下我认为有必要使用它。Eval() 函数被用作一个捷径，以避免必须解析 JavaScript 字符串编码的正则表达式。字面量正则表达式不需要解析，因为它们已经是 JavaScript 中的字符串。我还发现使用 eval() 函数对于支持替换功能是必需的。请告诉我，如果您能在不添加大量复杂性的情况下，不使用 Eval() 来实现这一点。

待办事项

使用字符串进行替换（即使带有反向引用）效果很好。但我尚未实现使用函数进行替换的功能，因此目前在界面中它是禁用的，否则将被忽略。

历史

版本 1.00.150 发布于 2004-10-20。