JavaScript正则表达式及 HTML 模板介绍使用

最新推荐文章于 2022-05-23 11:17:20 发布

凌_风

最新推荐文章于 2022-05-23 11:17:20 发布

阅读量1.9k

点赞数

分类专栏： WEB前端文章标签： javascript html 正则表达式 html模板 bxSlider

本文链接：https://blog.youkuaiyun.com/fgf00/article/details/53509386

版权

WEB前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了JavaScript中的正则表达式定义及应用方法，包括test()、exec()和compile()等，并提供了表单验证示例。同时，还概述了HTML模板组件如Bootstrap的基础使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 正则表达式，用于规定在文本中检索的内容。

一、定义正则表达式：

rep = /\d+/;        // js定义正则。（python定义正则：re模块 rep = "\d+")
// 注：定义正则表达式也可以  reg= new RegExp()

/…/ 用于定义正则表达式
/…/g 表示全局匹配
/…/i 表示不区分大小写
/…/m 表示多行匹配

JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容

> var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
"JavaScript is more fun than \
JavaEE or JavaBeans!"
> var pattern1 = /Java\w*/g;        // 无^、$，默认就是多行
> var pattern2 = /^Java\w*/g;       // 有^、$，只匹配一行
> var pattern = /^Java\w*/gm;       // 有^、$，多行匹配
> result = pattern.exec(text)
["JavaScript"]
> result = pattern.exec(text)
["JavaEE"]

二、正则对象的方法

有 3 个方法：test()、exec() 以及 compile()。

1、test()

test() 方法检索字符串中的指定值。返回值是 true 或 false。

> rep = /\d+/;
> rep.test("name89age")  // 默认：只要内部包含就返回true
true
> rep = /^\d+$/;		 // ^开始符号，$结束符号
> rep.test("name89fgf")
false

2、exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

非全局模式

> var text = "JavaScript is more fun than Java or JavaBeans!";
> var pattern = /\bJava\w*\b/;          // 默认只拿第一个
> result = pattern.exec(text)
["JavaScript"]
> var pattern = /\b(Java)\w*\b/;        // () 分组匹配
> result = pattern.exec(text)
["JavaScript", "Java"]
// 注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）

全局模式

需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕

var pattern = /\bJava\w*\b/g;   // 加g，反复执行exec，一个一个匹配结果
var text = "JavaScript is more fun than Java or JavaBeans!";
result = pattern.exec(text)

var pattern = /\b(Java)\w*\b/g; // 分组匹配（匹配结果再匹配）
var text = "JavaScript is more fun than Java or JavaBeans!";
result = pattern.exec(text)

3、compile()

compile() 方法用于改变正则表达式对象。

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

例子：

patt1 = new RegExp("e");
patt1.test("The best things in life are free");
patt1.compile("d");
patt1.test("The best things in life are free");

由于字符串中存在 “e”，而没有 “d”，以上代码的输出是：

true
false

三、表单验证-示例

1、知识点回顾

Dom和jQuery方式绑定事件，获取函数返回值

<body>
    <!--Dom方式：onclick里需要加return-->
    <a onclick="return ClickOn()"  href="http://blog.youkuaiyun.com/fgf00">走你1</a>
    <!--jQuery方式：-->
    <a id="i1" href="http://blog.youkuaiyun.com/fgf00">走你2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // Dom方式：
        function ClickOn() {
            alert(123);
            return true;  // true：执行后面操作，dom绑定里需要加return
        }
        // jQuery方式：
        $('#i1').click(function () {
            alert(456);
            return false;  // false：不执行后面操作
        })
    </script>
</body>

事件优先级

比如a标签等一些标签，默认就有绑定事件，再给添加一个自定义事件，哪个先执行？

# 默认事件先执行：
    checkbox(复选框)
# 自定义事件先执行
    a
    submit
    ...

2、表单验证

为了防止用户点一次，就往数据库发送一次连接请求，对于一些简单的比如文本格式、长度等，在浏览器上给拦截了，是不是就可以了。

对一部分检测的功能，放到前端上面做，用js实现。但是要知道，浏览器上的js是可以被禁用的。

一般情况下，对于用户的验证，前端写一套基本验证、后端也写一套完全验证，针对所有用户。

表单认证代码示例地址

四、HTML 模板组件

1、介绍

BootStrap （最好看的）
- css
- js
- [x] 学习 BootStrap 规则
jQueryUI （美观一般，偏后台。*）
- css
- js
- [x] 学习 jQueryUI 规则
EasyUI （html框架和生成的效果不一样，有时需要修改css、js，代价大一点）
- css
- js
- [x] 学习jQueryUI 规则

**总结：**jQueryUI和EasyUI 用在后台管理偏多，Bootstrap 后台主页显示都可以用。

可以直接用模板，不用重复造轮子

2、BootStrap

响应式布局（响应式页面）

面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。比如网页随着窗口大小的变化而显示不同的样式。

BootStrap css里面存在大量的响应式布局。

<head>
    <style>
        .c1{
            background-color: red;
            height: 50px;
        }
        @media (min-width: 900px){
            .c2{
                background-color: grey;
            }
        }
    </style>
</head>
<body>
    <div class="c1 c2"></div>
</body>

图标、字体 @font-face

BootStrap 里面有图标，但是没有图片，里面的图标是基于字体做的。

在 dist/fonts/ 目录里面。每个图标都有绑定的位置。比如 ”content: “\2212”“

使用的时候直接写上图标样式就可以了。

基本使用

修改BootStrap里面的样式时，注意样式有优先级的，下面的生效。更方便的，设置为最优先，最重要的。

.no-radius{
    border-radius: 0 !important;    /*优先级最高，最重要的*/
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap-theme.css">
    <style>
        .no-radius{
            border-radius: 0 !important;    /*优先级最高，最重要的*/
        }
    </style>
</head>
<body>
    <span class="glyphicon glyphicon-plus-sign"></span>

    <script src="jquery-1.12.4.js"></script>
    <script src="bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>
</body>
</html>

3、插件实现轮播图（bxSlider）

bxslider.com 下载插件，网站上有使用教程。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css">
</head>
<body>
    <ul class="bxslider">
        <li><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script src="jquery.bxslider/jquery.bxslider.js"></script>
    <script>
        $(document).ready(function(){
            $('.bxslider').bxSlider();
        });
    </script>
</body>
</html>