WEB前端教程：正则表达式测试器

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

课程目标

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

阅读

编码一

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

// 判断是否为邮箱地址,返回一个布尔值
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 后进行提交。

总结

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

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-28 11:05
阅读 ( 429 )
分类：WEB前端开发

WEB前端教程：正则表达式测试器

课程目标

阅读

编码一

编码二

进阶任务

提交

总结

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »