欢迎回来！

对于那些阅读了本教程系列第一部分的人，感谢您通过一篇理论文章掌握。随着我们从理论进行实践，它将获得回报。

在第2部分中，我们应用了我们在第1部分中学到的知识， 正则表达式为Web开发人员 ，这对某些关键概念进行了快速介绍正则表达式。

我们将通过构建演示单页应用程序（SPA）将理论转化为实践。

入门

对于那些尚未看到我们的水疗中心的人，下面的图1 显示了着陆页：

图。 1申请着陆页

上面的开放屏幕显示以下组件：

1.主要标题，它说明了该应用程序所做的工作，
'

2.在此下方，标注框在此范围内说明了
的目的。

3.接下来是多行测试字符串的滚动列表，将传递给

'它。

ââââ€4.在此下方，我们有一个 widtget ，在左侧，有一组2
'堆叠按钮。最高的验证邮政编码，触发
''– – – – – – – – – – – – – –'''''''''''''''''''''字符串。单击时，右侧的窗口将带有有效的zip

'''''''''代码正则表达式。。

5.第二个按钮 将文本框重置为默认状态，如
' 图1 。

我们将如何做所有这些？ 让我们考虑一下。

我们向我们的应用程序提供了一些预制的测试数据（尽管用户将文件上传到使用测试数据，则该原理将保持不变）。无论哪种情况， REGEX引擎均使用测试数据显示，并要求仅用于有效的邮政编码返回匹配项。

这比听起来更复杂。 正则表达式指定为 Regex Engine 必须能够执行以下所有操作：

• 确保用户输入仅由数字组成，并且可选为+4邮政编码的连字符。 （显然，在此演示应用程序的情况下，没有用户输入。但是，该项目的进一步开发可以使应用程序完全交互。）

• 没有字母顺序，标点符号或其他特殊符号保存在+4邮政编码中所需的连字符可能是返回的匹配项的一部分。

• 确保没有其他字符先于或遵循各种邮政编码（5位或+4）。

• 在每种情况下，邮政编码都必须以5位数字开始。

• 可选， Regex Engine 必须能够匹配5个字符序列，以连字符开始，并以4个数字结束。

• 最后，最后4位数字后不得发生字符。

所有这一切似乎是一个艰巨的任务。但是，正如我们在上一个教程中看到的那样，正则表达式具有满足所有这些要求的能力。

这一刻终于到了！

让我建立它！

毕竟，让我们付诸实践并构建此应用程序。

开始，请下载starter code。

步骤1.解开启动代码存档

存档命名为 Regex-Starter-code.zip 您可以将其重命名为您的喜好，例如 Regex-demo-web-app.zip.zip 。确保将 .zip 扩展在名称中，因为如果缺少扩展名，则某些邮政编码可能无法识别文件。

出于本教程的目的，我使用Microsoft Visual Studio Code，但是您也可以使用您喜欢的文本编辑器。

一旦您解开了重命名的 Regex-demo-web-app.zip （或您选择的任何名称），您将拥有类似于 figif中所示的文件结构2 。

图。 2项目文件结构

步骤2.将项目部分放在一起

我们的项目由 html 内容组成， css 样式和单个 javascript fileâ app.js 。

<!-- INSERT link to zipcodes.css stylesheet. -->

<title>Regex Demo-Zip Code</title>

<!-- INSERT app.js JavaScript -->

</head>

1.开放 index.html 如果您还没有这样做。
2.搜索上面的列表1 中的第一个评论，并用
''''''' - 3.现在我们整合了项目的最后一个组成部分。搜索
代码列表中的第二条评论上面的第二条评论，然后用
''''' ：
-

在<script>标签中的关键字 defer 确保浏览器

''加载对于 index.html 脚本执行之前的文档

开始。这样可以防止 javascript 丢弃错误，因为
'但已定义。

'

âââ€4.刷新您的浏览器。

太好了！如果一切都按计划进行，则您的网页应完全如图1 所示。但是，如果您单击两个按钮， 在这一点上绝对什么也没发生。 显然，这是因为我们尚未编写任何提供功能的代码这些按钮。

步骤3.捕获必要的dom节点

首先打开 app.js 启动代码存档中包含的文件。

在这一点上，整个文件只包含评论。我们首先捕获必要的 dom节点。我们将使用文档对象模型（DOM）来查明屏幕的各个部分，这些部分在用户与应用程序交互时需要更改。

首先需要在DOM对象中捕获哪些HTML元素？需要访问这些节点。因此，我们需要2 dom对象才能捕获验证邮政编码和 reset 按钮。

const resultButton = document.getElementById(‘validate’);
const resetButton = document.getElementById(‘reset’);
const resultBox = document.getElementById(‘results’);
const placeHolder = document.getElementById(‘message’);

resultButton <Enter>
resetButton <Enter>
resultBox <Enter>
placeHolder <Enter>

const testString =
`10003
asdf10003
10003asdf
jklm10003^$@%
10003-8924
one zero zero zero three
9101-94015
94015-9101
20012
08735
KbdsD$%^&*
sSd070031jkl;m
70122
\sKu2034
98108
75381
asdfjkl;
60661
!9004!@#$5^&*
97218
#,.$$&&%@
10022-3337
eNuhfF!.` ;

const regex = /^[0-9]{5}(-[0-9]{4})?$/gm;

const myConstant = <string.object>
     .match(<regular expression object>);

const match = testString.match(regex);

const paragraphText = [];

const createParagraphText = () => {
  matches.forEach( match => {
    let matchNumber = matches.IndexOf(match) + 1;
    paragraphText.push(
      ` Match #${matchNumber}: ${match}`
    );
  };
};

Match #1: 10003

const paragraphs = [];

const createParagraphs = () => {
  paragraphText.forEach( text => {
    const paragraph = document.createElement(‘p’);
    paragraph.textContent = text;
    paragraphs.push(paragraph);
  };
};

const paragraph = document.createElement(‘p’);

paragraph.textContent = text;

paragraphs.push(paragraph);

const appendParagraphs = (parent, children) => {
  children.forEach(  (child) => {
    parent.appendChild(child);
  });
};