18.JS正则表达式和HTML DOM

小阿宁的猫猫

于 2022-07-25 17:43:16 发布

阅读量339

点赞数 1

分类专栏： # JS WEB 文章标签：正则表达式 javascript html 前端开发语言

本文链接：https://blog.csdn.net/dyjkl/article/details/125979961

版权

WEB 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

小王子穿过沙漠。他只见过一朵花，一个有着三枚花瓣的花朵，一朵很不起眼的小花… ——《小王子》

JS正则表达式和HTML DOM

1.什么是正则表达式

使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

搜索模式可用于文本搜索和文本替换。

var patt = /yuegitech/i

/yuegitech/i  是一个正则表达式。
yuegitech是一个正则表达式主体 (用于检索)。
i  是一个修饰符 (搜索不区分大小写)。

2.字符串方法

正则表达式通常用于两个字符串方法 : search() 和 replace()。

(1) search() 方法

用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置

//使用正则表达式搜索 "yuejitech" 字符串，且不区分大小写：

var amiao = "Visit yuegitech!"; 
var n = amiao.search(/yuegitech/i);

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

//检索字符串中 "yuegitech" 的子串：

var amiao = "Visit yuegitech!"; 
var n = amiao.search("yuegitech");

(2) replace() 方法

用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。

//用正则表达式且不区分大小写将字符串中的 amiao 替换为 aning:

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/amiao/i,"aning");

replace() 方法将接收字符串作为参数：

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Amiao","aning");

3.修饰符和模式

(1) 修饰符可以在全局搜索中不区分大小写:

修饰符	         描述
  i	      执行对大小写不敏感的匹配。
  g	      执行全局匹配（查找所有匹配而非在找到第一个匹配	后停止）。
  m	      执行多行匹配。

(2) 方括号模式用于查找某个范围内的字符：

表达式	       描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找任何以 | 分隔的选项。

(3)元字符模式是拥有特殊含义的字符：

元字符	    描述
  \d	查找数字。
  \s	查找空白字符。
  \b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

(4)量词模式:

量词	    描述
 n+	  匹配任何包含至少一个 n 的字符串。
 n*   匹配任何包含零个或多个 n 的字符串。
 n?	  匹配任何包含零个或一个 n 的字符串。

4.RegExp 对象

(1) test()方法

是一个正则表达式方法。
用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

比如: 搜索字符串中的字符 “e”：

var patt = /e/;
patt.test("The best things in life are free!");

(2) exec()

是一个正则表达式方法。
用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

比如: 搜索字符串中的字母 “e”:

/e/.exec("The best things in life are free!");

5.什么是DOM？能做什么？

(1) 什么是DOM

当网页被加载时，浏览器会创建页面的文档对象模型简称DOM
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素

(2) DOM能做什么

改变 HTML 元素的内容 (innerHTML)
改变 HTML 元素的样式 (CSS)
对 HTML DOM 事件做出反应
添加或删除 HTML 元素

6.改变输出流

JS 能够创建动态的 HTML 内容：
比如即时获取当下时刻：
今天的日期是： Sat Jun 04 2022 13:12:58 GMT+0800 (中国标准时间)
在 JS 中，document.write() 可用于直接向 HTML 输出流写内容

7.改变内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

document.getElementById(id).innerHTML=新的 HTML

比如:

//改变<p>标签的内容
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>

8.改变属性

document.getElementById(id).某属性=新属性值

比如: 改变元素的 src 属性：

<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>

小阿宁的猫猫

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录