正则（2）及 JS 盒子模型

见解分享

2023-10-22 01:14:49

正则表达式

正则表达式，又称正规表示式、常规表达式，是一种用来匹配字符串的规则。它可以用来搜索、编辑或处理文本。正则表达式可以用来查找和提取字符串中的子字符串，例如一个单词、一个电话号码或一个电子邮箱地址。

正则表达式的基本概念

正则表达式由一系列字符组成，其中包括普通字符和特殊字符。普通字符就是键盘上可以输入的任何字符，例如字母、数字、符号等。特殊字符则具有特殊的含义，例如：

.：匹配任意单个字符
*：匹配前一个字符零次或多次
+：匹配前一个字符一次或多次
?：匹配前一个字符零次或一次
^：匹配字符串的开头
$：匹配字符串的结尾
|：匹配多个选项之一

正则表达式的语法规则

正则表达式的语法规则定义了如何使用特殊字符来匹配字符串。例如：

ab*c：匹配以字母a开头，后面跟任意多个字母b，再以字母c结尾的字符串。
\d+：匹配一个或多个数字。
\w+：匹配一个或多个字母、数字或下划线。
[abc]：匹配字母a、b或c中的一个。
[^abc]：匹配除了字母a、b或c之外的任何字符。

正则表达式的匹配方法

正则表达式可以通过两种方法来匹配字符串：

match()：匹配字符串的开头。
exec()：匹配字符串中的任何位置。

例如：

const str = "Hello, world!";
const regex = /Hello/;

console.log(str.match(regex)); // ["Hello"]
console.log(str.exec(regex)); // ["Hello", index: 0, input: "Hello, world!"]

JS 盒子模型

JS 盒子模型是 CSS 布局的基础。它定义了元素在网页上的位置和大小。盒子模型由四个部分组成：

内容（Content）：元素的内容，例如文本、图像或视频。
内边距（Padding）：内容周围的空白区域。
边框（Border）：内容周围的线。
外边距（Margin）：元素周围的空白区域。

盒子模型的属性可以用来控制元素的大小、位置和外观。例如：

width：元素的宽度。
height：元素的高度。
padding：元素的内边距。
border：元素的边框。
margin：元素的外边距。

CSS 中的盒子模型

在 CSS 中，盒子模型的属性可以使用以下方式设置：

element {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 10px;
}

HTML 中的盒子模型

在 HTML 中，盒子模型的属性可以使用以下方式设置：

<div style="width: 100px; height: 100px; padding: 10px; border: 1px solid black; margin: 10px;"></div>

JavaScript 中的盒子模型

在 JavaScript 中，盒子模型的属性可以使用以下方式获取或设置：

const element = document.getElementById("myElement");

console.log(element.offsetWidth); // 元素的宽度，包括内边距和边框
console.log(element.offsetHeight); // 元素的高度，包括内边距和边框
console.log(element.clientWidth); // 元素的宽度，不包括内边距和边框
console.log(element.clientHeight); // 元素的高度，不包括内边距和边框

element.style.width = "100px"; // 设置元素的宽度
element.style.height = "100px"; // 设置元素的高度