正则表达式测试器

课程目标

学习理解正则达式的语法，通过实现一个正则表达式测试器掌握正则表达式编程方法。

阅读

• 正则表达式 - JavaScript | MDN (opens new window)
• Learn Regex (opens new window)
• JavaScript 正则表达式迷你书 (opens new window)
• RegExp 对象 - JavaScript 教程 - 网道 (opens new window)
• JavaScript 正则表达式视频教程-慕课网 (opens new window)

编码一

学习正则表达式完成以下小练习

// 判断是否为邮箱地址,返回一个布尔值
function isEmail(emailStr) {
  // your implement
}
//测试用例
console.log(isEmail("123456789@qq.com")); //-> true
console.log(isEmail("jack@baidu.com")); //-> true
console.log(isEmail("jackbaidu.com")); //-> false

// 判断是否为手机号，返回一个布尔值
function isMobilePhone(phone) {
  // your implement
}

//测试用例
console.log(isEmail("12345678909")); //-> true
console.log(isEmail("dfhsuh343")); //-> false

//利用正则表达式，去除字符串中重复的字母,返回去重之后的字符串
function removeDuplicate(str) {
  // your implement
}
//测试用例
console.log(removeDuplicate("aab")); //->"ab"
console.log(removeDuplicate("abc")); //->"abc"
console.log(removeDuplicate("aaaaaabbbbbbbccccccc")); //->"abc"

//利用正则表达式处理字符串，将连字符式字符串转化为小驼峰式命名并返回
function toSmallHump(str) {
  // your implement
}

//测试用例
console.log(toSmallHump("get-element-by-id")); //->"getElementById"
console.log(toSmallHump("data-id")); //->"dataId"

//获取 url 中的参数
function getUrlParam(url, key) {
  // your implement
}

//测试用例
console.log(getUrlParam("http://xxxx.com?name=jackson&id=123", "name")); //->"jackson"
console.log(getUrlParam("http://xxxx.com?name=jackson&id=123", "id")); //->"123"

编码二

参考 示例图 (opens new window) ,利用 HTML，CSS，JavaScript 实现一个正则测试器。

用例描述

• 实现通过正则表达式进行校验、匹配、替换功能.
• 有两个单行输入框，和三个多行输入框，以及两个按钮，两个单选框，具体功能参考 用例说明图 (opens new window)
• 匹配功能：点击执行匹配，原文本根据用户输入的正则表达式以及范围匹配要求进行匹配筛选，筛选出来的字符高亮显示。
• 替换功能：用户输入替换的文本，点击替换，高亮显示的文本替换成用户输入的替换文本，结果显示在替换结果只读的多行文本框内。
• 用正则表达式进行输入框的非空判断，并进行相应的提示。比如用户点击匹配按钮，但是用户并且没有输入文本，提示请输入进行正则测试的文本

要求

• 要求功能实现与用例描述中完全一致
• 示例图仅为参考，样式不需要完全实现一致
• 请注意代码风格的整齐、优雅
• 不使用任何第三方的布局或样式库
• 不使用任何第三方的 JavaScript 库
• 代码中含有必要的注释

进阶任务

如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。