一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JavaScript 正则表达式</title>

</head>

<body>

    <!--search方法使用正则表达式-->

    <p>搜索字符串"w3cSchool",并显示匹配的起始位置</p>

    <button onclick="myFunction()">点我</button>

    <p id="demo"></p>

    <script>

    function myFunction() {

        var str = "Visit W3cSchool!";

        var n = str.search(/w3cSchool/i);

        document.getElementById("demo").innerHTML = n;

    }

    </script>

    <!--search方法使用字符串-->

    <p>搜索字符串 "W3cSchool", 并显示匹配的起始位置：</p>

    <button onclick="myFunction()">点我</button>

    <p id="demo1"></p>

    <script>

    function myFunction() {

        var str = "Visit W3cSchool!";

        var n = str.search("W3cSchool");

        document.getElementById("demo1").innerHTML = n;

    }

    </script>

    <!--replace方法使用正则表达式-->

    <p>替换"microsoft"为"w3cschool</p>

    <button onclick="myFunction()">点我</button>

    <p id="demo3">Please visit microsoft</p>

    <script>

    function myFunction() {

        var str = document.getElementById("demo3").innerHTML;

        var txt = str.replace(/microsoft/i, "w3cshool");

        document.getElementById("demo3").innerHTML = txt;

    }

    </script>

    <!--replace方法使用字符串-->

    <p>替换"microsoft"为"w3cschool"</p>

    <button onclick="myFunction()">点我</button>

    <p id="demo4">please visit microsoft</p>

    <script>

    function myFunction() {

        var str = document.getElementById("demo4").innerHTML;

        var txt = str.replace(/microsoft/i, "w3cschool");

        document.getElementById("demo4").innerHTML = txt;

    }

    </script>

    <!--使用 test()-->

    <script>

    var patt1 = new RegExp("e");

    document.write(patt1.test("The best things in life are free"));

    </script>

    <!--使用 exec()-->

    <script>

    var patt1 = new RegExp("e");

    document.write(patt1.exec("the best things in life are free"));

    </script>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-JavaScript-JavaScript正则表达式的更多相关文章

  1. 如何使用JavaScript和正则表达式进行数据验证

    利用客户端JavaScript的优势,JavaScript中的正则表达式可以简化数据验证的工作,下面与大家分享下如何使用JavaScript和正则表达式进行数据验证,感兴趣的朋友可以参考下哈 数据验证 ...

  2. 2015年10个最佳Web开发JavaScript库

    2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...

  3. Web开发——JavaScript基础

    参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...

  4. WEB前端--JavaScript

    JavaScript JavaScript基础 一.JavaScript简介 JavaScript是一种嵌入到HTML文件中的描述性语言,由浏览器的解释器将其动态地处理成可执行的代码,能独立地完成与客 ...

  5. JS红宝书笔记——第一章 JavaScript简介

    1.JavaScript简史 Netscape公司决定开发一种客户端语言用来处理浏览器端简单的表单验证. Netscape公司派布兰登·艾奇(BrendanEich)为计划于1995年2月发布的Net ...

  6. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  7. Web Worker javascript多线程编程（二）

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  8. javascript类型系统——正则表达式RegExp类型

    × 目录 [1]对象 [2]实例属性 [3]静态属性[4]实例方法 前面的话 前面已经介绍过javascript中正则表达式的基础语法.javascript的RegExp类表示正则表达式,String ...

  9. JavaScript正则表达式详解（二）JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  10. javascript中正则表达式的基础语法

    × 目录 [1]定义 [2]特点 [3]元字符[4]转义字符[5]字符组[6]量词[7]括号[8]选择[9]断言[10]模式[11]优先级[12]局限性 前面的话 正则表达式在人们的印象中可能是一堆无 ...

随机推荐

  1. Ansible工具原理一

    ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量程序部署.批量运行命 ...

  2. iReport 5.6.0 启动闪退的问题 解决方案

    问题描述 本人使用的Windows版本的 iReport 5.6.0,安装成功后,双击桌面上的iReport-5.6.0图标,出现了闪退,无法正常启动的现象.现象如下: 问题原因 iReport 5. ...

  3. 【Java提高】---通过UUID、SHA-1、Base64组合加密

    通过UUID.SHA-1.Base64组合加密 该篇文章实现的最终效果是: 1)加密是不可逆的. 2)相同字符串加密产生后的字符串都不一样 3)所以要想比较两个字符串是否相等,需要用已经加过密的字符串 ...

  4. sql server 索引阐述系列三 表的堆组织

    一.   概述 这一节来详细介绍堆组织,通过讲解堆的结构,堆与非聚集索引的关系,堆的应用场景,堆与聚集索引的存储空间占用,堆的页拆分现象,最后堆的使用建议 ,这几个维度来描述堆组织.在sqlserve ...

  5. 第二次作业：分布式版本控制系统Git的安装与使用

    本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2103 第一个git仓库地址:https://github.com/ ...

  6. struts转发和重定向action

    1.转发(服务器端跳转) <action name="rederTo"> <result type="chain">hello</ ...

  7. 日志切割工具logrotate解决Tomcat catalina.out日志过大的问题

    一.介绍日志切割logrotate 对于Linux系统安全来说,日志文件是极其重要的工具.不知为何,我发现很多运维同学的服务器上都运行着一些诸如每天切分Nginx日志之类的CRON脚本,大家似乎遗忘了 ...

  8. 【Bootstrap系列】详解Bootstrap-table

    本篇文章将与大家分享bootstrap-table插件,借助于它实现基本的增删改查,导入导出,分页,父子表等. 至于其他技术,如冻结表头,列排列,行拖动,列拖动等,会在后续文章中与大家分享. 一    ...

  9. Go语言学习笔记(六) [包]

    日期:2014年7月30日   1.定义:包时函数和数据的集合.使用package关键字定义一个包,文件名不需要与包名一致,包名约定使用小写字符,Go包可以由多个文件组成,但是需要使用相同的packa ...

  10. go基础系列：数组

    了解Python.Perl.JavaScript的人想必都知道它们的数组是动态的,可以随需求自动增大数组长度.但Go中的数组是固定长度的,数组一经声明,就无法扩大.缩减数组的长度.但Go中也有类似的动 ...