06.初识事件~正则表达式（97~117）

Tsugumi
115 阅读19分钟

事件

1.初识事件

box.onclick()

在 JavaScript 中，onclick 是一个事件处理器，用于向 HTML 元素添加单击事件。如果要通过 JavaScript 来触发元素的点击事件，可以使用 click 方法。以下是一个示例：

<!DOCTYPE html>
<html>
<body>

<button id="myButton">点击我</button>

<script>
// 获取按钮元素
var button = document.getElementById("myButton");

// 添加点击事件处理器
button.onclick = function() {
  alert("按钮被点击了");
};

// 通过 JavaScript 触发点击事件
button.click();
</script>

</body>
</html>

在这个示例中，我们首先获取了一个按钮元素，然后使用 onclick 事件处理器向按钮添加了一个点击事件。接着，我们使用 click 方法来触发按钮的点击事件。当页面加载后，按钮的点击事件将会被自动触发，弹出一个警示框。

dom0类型

DOM0级事件是指在JavaScript中使用DOM（文档对象模型）的早期版本中，通过直接给元素的事件属性赋值的方式来添加事件处理程序。例如，通过将一个函数分配给元素的onclick属性来指定单击事件的处理程序。

<!DOCTYPE html>
<html>
<body>

<button id="myButton">点击我</button>

<script>
// 获取按钮元素
var button = document.getElementById("myButton");

// 添加点击事件处理器
button.onclick = function() {
  alert("按钮被点击了");
};
</script>

</body>
</html>

image.png

dom2类型

image.png

DOM2级事件是指使用DOM（文档对象模型）规范定义的事件处理程序的方式。DOM2级事件模型引入了addEventListener和removeEventListener方法，这些方法允许将多个事件处理程序附加到同一元素，以及更灵活地管理事件处理。

<!DOCTYPE html>
<html>
<body>

<button id="myButton">点击我</button>

<script>
// 获取按钮元素
var button = document.getElementById("myButton");

// 添加点击事件处理器
button.addEventListener("click", function() {
  alert("按钮被点击了");
});
</script>

</body>
</html>

在上面的示例中，addEventListener方法用来指定当按钮被点击时要执行的函数。这种方式称为DOM2级事件处理程序。使用addEventListener方法可以将多个事件处理程序附加到同一元素，并且可以更容易地移除事件处理程序。

2.事件解绑

dom0（覆盖）

image.png

dom2

image.png

上述不兼容低版本

image.png

3.事件类型

鼠标事件

click

鼠标事件中的 "click" 事件是指用户单击（点击）鼠标时触发的事件。在 JavaScript 中，可以使用 "click" 事件来响应用户的鼠标点击操作。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<body>

<button id="myButton">点击我</button>

<script>
// 获取按钮元素
var button = document.getElementById("myButton");

// 添加点击事件处理程序
button.addEventListener("click", function() {
  alert("按钮被点击了");
});
</script>

</body>
</html>

在这个示例中，当用户单击按钮时，将触发 "click" 事件，然后弹出一个警示框显示 "按钮被点击了"。这样就实现了通过 JavaScript 响应用户的鼠标点击操作。

dblclick

双击事件（dblclick）是指用户快速连续两次点击鼠标按钮时触发的事件。在 JavaScript 中，可以使用 "dblclick" 事件来响应用户的双击操作。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<body>

<button id="myButton">双击我</button>

<script>
// 获取按钮元素
var button = document.getElementById("myButton");

// 添加双击事件处理程序
button.addEventListener("dblclick", function() {
  alert("按钮被双击了");
});
</script>

</body>
</html>

在这个示例中，当用户双击按钮时，将触发 "dblclick" 事件，然后弹出一个警示框显示 "按钮被双击了"。这样就实现了通过 JavaScript 响应用户的双击操作。

contextmenu

image.png

mousedown mousemove mouseup

image.png

  1. mousedown：当鼠标按下时触发。
  2. mousemove：当鼠标在元素上移动时触发。
  3. mouseup：当鼠标释放时触发。

下面是一个简单的示例，展示了如何在一个元素上使用这些事件：

<!DOCTYPE html>
<html>
<body>

<div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;"></div>

<script>
var div = document.getElementById("myDiv");

div.addEventListener("mousedown", function(event) {
  div.style.backgroundColor = "lightgreen";
});

div.addEventListener("mousemove", function(event) {
  div.style.backgroundColor = "lightpink";
});

div.addEventListener("mouseup", function(event) {
  div.style.backgroundColor = "lightblue";
});
</script>

</body>
</html>

在这个示例中，当鼠标按下时，div 的背景颜色将变为 lightgreen；当鼠标在 div 上移动时，背景颜色将变为 lightpink；当鼠标释放时，背景颜色将恢复为 lightblue。这展示了如何使用这些鼠标事件来响应鼠标的交互操作。

mouseover mouseout

当用户将鼠标悬停在一个元素上时，会触发 "mouseover" 事件。当用户将鼠标从该元素移开时，会触发 "mouseout" 事件。

以下是一个简单的示例，演示如何在 HTML 和 JavaScript 中使用 "mouseover" 和 "mouseout" 事件：

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>

<div id="myElement" onmouseover="highlightElement()" onmouseout="unhighlightElement()">Hover over me</div>

<script>
  function highlightElement() {
    document.getElementById("myElement").classList.add("highlight");
  }

  function unhighlightElement() {
    document.getElementById("myElement").classList.remove("highlight");
  }
</script>

</body>
</html>

image.png 子元素也会触发

mouseenter mouseleave

以下是一个简单的示例，演示如何在HTML和JavaScript中使用"mouseenter"和"mouseleave"事件：

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>

<div id="myElement">Hover over me</div>

<script>
  var element = document.getElementById("myElement");

  element.addEventListener("mouseenter", function() {
    this.classList.add("highlight");
  });

  element.addEventListener("mouseleave", function() {
    this.classList.remove("highlight");
  });
</script>

</body>
</html>

子元素不会触发

键盘事件

keydown

以下是一个简单的示例，演示如何在HTML和JavaScript中使用"keydown"事件：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<input type="text" id="myInput" onkeydown="myFunction(event)">

<script>
function myFunction(event) {
  if (event.key === "Enter") {
    alert("Enter key pressed");
  }
}
</script>

</body>
</html>

在这个示例中，我们有一个文本输入框，当用户在输入框中按下键盘上的任何键时，会触发"keydown"事件，并调用myFunction函数来捕获事件对象。在myFunction函数中，我们检查按下的键是否是"Enter"键，如果是，则弹出一个警告框。

keyup

以下是一个简单的示例，演示如何在HTML和JavaScript中使用"keyup"事件：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<input type="text" id="myInput" onkeyup="myFunction()">

<script>
function myFunction() {
  var inputText = document.getElementById("myInput").value;
  console.log("Input value: " + inputText);
}
</script>

</body>
</html>

在这个示例中，我们有一个文本输入框，当用户在输入框中释放键盘上的按键时，会触发"keyup"事件，并调用myFunction函数。在myFunction函数中，我们获取输入框中的值，并将其打印到控制台中。这样就可以实时捕获用户的输入，并对其进行处理。

表单事件

focus blur

  • "focus" 事件在元素获得焦点时触发，通常用于处理用户输入或交互的情况。例如，可以在输入框获得焦点时改变其样式或显示相关的提示信息。
  • "blur" 事件在元素失去焦点时触发，通常用于处理用户输入完成或离开交互区域的情况。例如，可以在输入框失去焦点时进行输入验证或隐藏相关的提示信息。

以下是一个简单的示例，演示如何在HTML和JavaScript中使用 "focus" 和 "blur" 事件：

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      border: 2px solid blue;
    }
  </style>
</head>
<body>

<input type="text" id="myInput" onfocus="highlightInput()" onblur="unhighlightInput()" placeholder="Enter your name">

<script>
  function highlightInput() {
    document.getElementById("myInput").classList.add("highlight");
  }

  function unhighlightInput() {
    document.getElementById("myInput").classList.remove("highlight");
  }
</script>

</body>
</html>

在这个示例中，当用户在输入框中获得焦点时，会触发 "focus" 事件，调用 "highlightInput" 函数来添加一个名为 "highlight" 的 CSS 类，从而改变输入框的边框样式。当用户离开输入框时，会触发 "blur" 事件，调用 "unhighlightInput" 函数来移除 "highlight" 类，使输入框恢复原来的样式。

change

image.png

input

image.png 下拉列表识别内容不一样

submbit reset

  • "submit" 事件在用户提交表单时触发。它通常用于执行表单验证、数据处理和提交操作。可以使用 JavaScript 来捕获该事件，对表单数据进行验证，然后执行相应的提交操作。

以下是一个简单的示例，演示如何在 HTML 和 JavaScript 中使用 "submit" 事件：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<form id="myForm" onsubmit="validateForm()">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  var username = document.forms["myForm"]["username"].value;
  if (username == "") {
    alert("Username must be filled out");
    return false;
  }
}
</script>

</body>
</html>

在这个示例中，当用户提交表单时，会触发 "submit" 事件，调用 validateForm 函数进行表单验证。如果用户名为空，则会弹出警告框，并且阻止表单的实际提交。

  • "reset" 事件在用户点击表单的重置按钮时触发。它通常用于清除表单中的所有输入，将表单恢复到初始状态。

以下是一个简单的示例，演示如何在 HTML 和 JavaScript 中使用 "reset" 事件：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<form id="myForm" onreset="resetForm()">
  <input type="text" name="username">
  <input type="reset" value="Reset">
</form>

<script>
function resetForm() {
  alert("Form has been reset");
}
</script>

</body>
</html>

在这个示例中，当用户点击重置按钮时，会触发 "reset" 事件，调用 resetForm 函数进行一些重置操作。在这个示例中，我们简单地弹出一个警告框来告知用户表单已经被重置。

image.png

触摸事件

touchstart/move/hend

"touchstart" 事件在用户触摸屏幕上的元素时触发。它是触摸操作的起始点，类似于鼠标的 "mousedown" 事件。 "touchmove" 事件在用户在屏幕上移动手指时触发。它用于捕获手指在屏幕上的移动，通常用于实现拖放或滑动操作。 "touchend" 事件在用户从屏幕上抬起手指时触发。它标志着触摸操作的结束，类似于鼠标的 "mouseup" 事件。

以下是一个简单的示例，演示如何在 HTML 和 JavaScript 中使用这些触摸事件：

<!DOCTYPE html>
<html>
<head>
  <style>
    #myElement {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>

<div id="myElement" ontouchstart="handleTouchStart(event)" ontouchmove="handleTouchMove(event)" ontouchend="handleTouchEnd(event)"></div>

<script>
var xStart, yStart;

function handleTouchStart(event) {
  xStart = event.touches[0].clientX;
  yStart = event.touches[0].clientY;
}

function handleTouchMove(event) {
  var xMove = event.touches[0].clientX;
  var yMove = event.touches[0].clientY;
  var xDiff = xMove - xStart;
  var yDiff = yMove - yStart;
  document.getElementById("myElement").style.transform = "translate(" + xDiff + "px, " + yDiff + "px)";
}

function handleTouchEnd(event) {
  document.getElementById("myElement").style.transform = "translate(0px, 0px)";
}
</script>

</body>
</html>

在这个示例中，我们创建了一个可拖动的红色方块，并使用 "touchstart"、"touchmove" 和 "touchend" 事件来处理触摸屏上的交互操作。当用户触摸屏幕、移动手指和抬起手指时，分别触发相应的事件处理函数，从而实现了拖动方块的效果。

touchcancel

image.png

触摸被打断

4.事件对象

介绍事件对象

image.png

事件对象可以通过事件处理程序的参数传递给事件处理函数，例如：

element.addEventListener('click', function(event) {
  console.log(event.type); // 输出事件类型
  console.log(event.target); // 输出触发事件的元素
  event.preventDefault(); // 阻止事件的默认行为
});

image.png 通过事件对象，JavaScript可以实现对用户交互的响应和处理，例如处理用户点击、键盘输入、鼠标移动等各种事件。

鼠标事件

clientX clientY

clientX 和 clientY 是事件对象中的属性，通常用于鼠标事件，提供了鼠标指针相对于浏览器窗口的水平和垂直坐标。

  • clientX 属性返回鼠标指针相对于浏览器窗口的水平坐标，即鼠标指针相对于浏览器窗口左上角的水平位置。
  • clientY 属性返回鼠标指针相对于浏览器窗口的垂直坐标，即鼠标指针相对于浏览器窗口左上角的垂直位置。

这些属性可以用来获取鼠标指针在触发鼠标事件时的位置，通常用于计算鼠标事件发生时的具体位置，以便进行相应的处理。

例如，在鼠标点击事件的处理程序中，可以使用clientX 和 clientY 属性来获取鼠标点击的具体位置：

element.addEventListener('click', function(event) {
  console.log('鼠标点击位置：', event.clientX, event.clientY);
});

image.png

pageX pageY

pageX 和 pageY 是事件对象中的属性，通常用于鼠标事件，提供了鼠标指针相对于整个页面的水平和垂直坐标。

  • pageX 属性返回鼠标指针相对于整个页面的水平坐标，即鼠标指针相对于页面左上角的水平位置。
  • pageY 属性返回鼠标指针相对于整个页面的垂直坐标，即鼠标指针相对于页面左上角的垂直位置。

这些属性可以用来获取鼠标指针在触发鼠标事件时相对于整个页面的位置，而非仅在浏览器窗口内的位置。

例如，在鼠标点击事件的处理程序中，可以使用pageX 和 pageY 属性来获取鼠标点击的具体位置：

element.addEventListener('click', function(event) {
  console.log('鼠标点击位置：', event.pageX, event.pageY);
});

image.png

offsetX offsetY

offsetX 和 offsetY 是事件对象中的属性，通常用于鼠标事件，提供了鼠标指针相对于触发事件的元素的水平和垂直坐标。

  • offsetX 属性返回鼠标指针相对于触发事件的元素的水平坐标，即鼠标指针相对于触发事件的元素的左上角的水平位置。
  • offsetY 属性返回鼠标指针相对于触发事件的元素的垂直坐标，即鼠标指针相对于触发事件的元素的左上角的垂直位置。

这些属性可以用来获取鼠标指针在触发鼠标事件的元素内的位置，而非整个页面或浏览器窗口内的位置。

例如，在鼠标移动事件的处理程序中，可以使用offsetX 和 offsetY 属性来获取鼠标指针相对于触发事件元素的位置：

element.addEventListener('mousemove', function(event) {
  console.log('鼠标相对于元素的位置：', event.offsetX, event.offsetY);
});

image.png

案例-鼠标跟随

以下是一个简单的鼠标跟随案例，当鼠标在页面上移动时，会显示一个跟随鼠标移动的元素：

<!DOCTYPE html>
<html>
<head>
  <title>鼠标跟随案例</title>
  <style>
    #follower {
      width: 50px;
      height: 50px;
      background-color: #00f;
      position: absolute;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="follower"></div>
  <script>
    const follower = document.getElementById('follower');

    document.addEventListener('mousemove', function(event) {
      follower.style.left = (event.pageX - 25) + 'px'; // 25 是元素宽度的一半
      follower.style.top = (event.pageY - 25) + 'px'; // 25 是元素高度的一半
    });
  </script>
</body>
</html>

在这个案例中，我们创建了一个圆形的元素follower，并使用mousemove事件来监听鼠标的移动。当鼠标移动时，通过修改follower元素的left和top样式属性，使其跟随鼠标移动。这样就实现了一个简单的鼠标跟随效果。

进阶详细

image.png

案例-鼠标拖拽

下面是一个简单的鼠标拖拽案例，当用户按住鼠标左键并拖动时，可以拖动一个元素：

<!DOCTYPE html>
<html>
<head>
  <title>鼠标拖拽案例</title>
  <style>
    #draggable {
      width: 100px;
      height: 100px;
      background-color: #00f;
      position: absolute;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="draggable"></div>
  <script>
    const draggable = document.getElementById('draggable');
    let offsetX, offsetY;
    let isDragging = false;

    // 当鼠标按下时记录鼠标相对于元素的偏移量，并设置拖拽标志为true
    draggable.addEventListener('mousedown', function(event) {
      offsetX = event.offsetX;
      offsetY = event.offsetY;
      isDragging = true;
    });

    // 当鼠标移动时，如果正在拖拽，则根据鼠标位置和偏移量设置元素的新位置
    document.addEventListener('mousemove', function(event) {
      if (isDragging) {
        draggable.style.left = (event.pageX - offsetX) + 'px';
        draggable.style.top = (event.pageY - offsetY) + 'px';
      }
    });

    // 当鼠标释放时，停止拖拽
    document.addEventListener('mouseup', function() {
      isDragging = false;
    });
  </script>
</body>
</html>

在这个案例中，我们创建了一个蓝色的方块元素draggable，并使用mousedown、mousemove和mouseup事件来实现拖拽功能。当用户按下鼠标左键在方块上时，记录了鼠标相对于元素的偏移量，并将isDragging标志设为true；当用户移动鼠标时，如果isDragging为true，则根据鼠标位置和偏移量来设置元素的新位置；当用户释放鼠标左键时，将isDragging标志设为false，停止拖拽。

image.png

5.DOM事件流

image.png

image.png

捕获阶段一般不会绑定事件

冒泡阶段绑定事件触发

DOM标准事件流是指在DOM结构中，事件在不同的元素上按照特定的顺序进行传播和处理的过程。DOM标准事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

1. 捕获阶段：事件从文档根节点开始往下传播到目标元素的过程，依次经过祖先元素，直到达到目标元素。

2. 目标阶段：事件在目标元素上被触发并处理。

3. 冒泡阶段：事件从目标元素开始往上冒泡到文档根节点的过程，依次经过祖先元素，直到达到文档根节点。

阻止事件传播

stopProagation

使用示例：

element.addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件继续冒泡
});

image.png

ie兼容 阻止向前放

image.png

阻止默认行为

dom0 return false

image.png

preventDefault 阻止默认

preventDefault() 方法。

element.addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件继续冒泡
  event.preventDefault(); // 阻止事件的默认行为
});

ie兼容

image.png

案例-自定义右键菜单

(106-案例-自定义右键菜单_哔哩哔哩_bilibili)

image.png

6.事件委托

事件委托（Event Delegation）是指利用事件冒泡的原理，将事件处理器注册在父元素上，通过判断事件的目标来决定具体触发的操作。这种技术可以帮助简化代码，提高性能，并且可以轻松地处理动态添加或移除的子元素。

下面是一个简单的示例，演示了如何使用事件委托来处理多个子元素的点击事件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Delegation Example</title>
</head>
<body>
  <ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <script>
    document.getElementById('myList').addEventListener('click', function(event) {
      if (event.target.tagName === 'LI') {
        alert('You clicked on: ' + event.target.textContent);
      }
    });
  </script>
</body>
</html>

在这个示例中，我们将 click 事件处理器注册在父元素 ul 上。当用户点击 ul 元素内的任何 li 元素时，事件会冒泡到 ul 上，并触发事件处理函数。在事件处理函数中，我们使用 event.target 来判断触发事件的目标元素是否是 li 元素，如果是，则执行相应的操作。

通过事件委托，我们无需为每个 li 元素分别注册事件处理器，而是将事件处理器注册在 ul 上，从而实现了对多个子元素的统一管理。这样可以提高性能，减少内存占用，并且可以轻松处理动态添加或移除的子元素。

总之，事件委托是一种利用事件冒泡原理的技术，可以帮助简化代码，提高性能，并且适用于处理动态添加或移除的子元素。

target

image.png

在 JavaScript 中，target 是一个常用的属性，它通常用于处理事件对象（Event Object）。在事件处理函数中，target 表示触发事件的元素，即事件最初发生的那个元素。

例如，当用户点击页面上的某个按钮时，将触发一个点击事件。在点击事件的处理函数中，可以使用 event.target 来获取触发事件的按钮元素。

下面是一个简单的示例，演示了如何使用 target 属性来获取触发事件的元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Target Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    document.getElementById('myButton').addEventListener('click', function(event) {
      alert('You clicked on: ' + event.target.id);
    });
  </script>
</body>
</html>

在这个示例中，当用户点击按钮时，会触发点击事件处理函数。在事件处理函数中，我们使用 event.target.id 来获取触发事件的按钮元素的 id 属性，并弹出一个包含该 id 的提示框。

6.正则表达式

在 JavaScript 中，正则表达式是由斜杠（/）包围的模式和可选标志组成的。JavaScript 提供了内置的正则表达式对象（RegExp 对象），以及用于处理正则表达式的方法。

下面是一个简单的示例，演示了如何在 JavaScript 中使用正则表达式：

// 创建一个正则表达式对象，用于匹配包含 "cat" 或 "dog" 的字符串
let pattern = /cat|dog/;

// 使用 test 方法测试字符串是否匹配正则表达式
let result = pattern.test("I have a cat");
console.log(result); // 输出: true

// 使用 match 方法从字符串中提取匹配的内容
let str = "I have a cat and a dog";
let matches = str.match(pattern);
console.log(matches); // 输出: ["cat", "dog"]

在这个例子中，我们创建了一个正则表达式对象，然后使用 test 方法测试了一个字符串是否匹配该模式。接着，我们使用 match 方法从字符串中提取了匹配的内容。

除了 test 和 match 方法，JavaScript 还提供了其他用于处理正则表达式的方法，如 exec、replace、search 等。此外，还可以使用标志（如 g、i、m）来设置正则表达式的匹配行为。

js复杂类型

字面量

image.png

内置构造函数

image.png

元字符-基本元字符

  1. "." : 匹配除换行符以外的任意字符
  2. "^" : 匹配字符串的开始
  3. "$" : 匹配字符串的结束
  4. "*" : 匹配前面的子表达式零次或多次
  5. "+" : 匹配前面的子表达式一次或多次
  6. "?" : 匹配前面的子表达式零次或一次
  7. "|" : 或操作，匹配两个子表达式之一
  8. "()" : 用于捕获匹配的子表达式
  9. "[]" : 匹配括号内的任意一个字符
  10. "{}" : 限定符，指定匹配的次数范围
  11. "" : 转义字符，用于匹配特殊字符
  12. "\d" : 匹配数字字符
  13. "\w" : 匹配字母、数字、下划线
  14. "\s" : 匹配空白字符
  15. "\b" : 匹配单词边界

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

元字符-边界符

在正则表达式中，边界符用于匹配字符串的边界或特定位置。常见的边界符包括：

  1. ^ : 匹配字符串的开始
  2. $ : 匹配字符串的结束
  3. \b : 匹配单词边界
  4. \B : 匹配非单词边界

image.png

image.png

image.png

元字符-限定符

在正则表达式中，限定符用于指定匹配的次数范围。常见的限定符包括：

1. * : 匹配前面的子表达式零次或多次

2.+ : 匹配前面的子表达式一次或多次

3.? : 匹配前面的子表达式零次或一次

4.{n} : 匹配前面的子表达式恰好 n 次

5.{n,} : 匹配前面的子表达式至少 n 次

6.{n,m} : 匹配前面的子表达式至少 n 次，最多 m 次

image.png

image.png

image.png

image.png

image.png

image.png

image.png

元字符-特殊符号

image.png

image.png

image.png

image.png

捕获exec

在正则表达式中，捕获是指使用括号 () 将匹配的子表达式捕获到一个单独的组中。这样做的好处是可以在匹配后提取或进一步处理这些捕获的内容。在 JavaScript 中，可以使用 exec() 方法来执行正则表达式并捕获匹配的内容。

下面是一个简单的示例，演示了如何使用 exec() 方法捕获匹配的内容：

let str = "Hello, my email is example@email.com";
let regex = /(\w+)@(\w+).com/; // 匹配email地址的正则表达式

let match = regex.exec(str);
if (match) {
  let fullMatch = match[0]; // 整个匹配的字符串
  let username = match[1]; // 用户名部分
  let domain = match[2]; // 域名部分
  console.log("Full match: " + fullMatch);
  console.log("Username: " + username);
  console.log("Domain: " + domain);
}

在这个例子中，我们使用 exec() 方法执行了正则表达式，然后从匹配的结果中提取了捕获的内容。捕获的内容存储在 match 对象的数组中，索引为 0 的元素是整个匹配的字符串，之后的元素分别对应括号中捕获的内容。

image.png

标识符 g i

正则表达式中，标识符 g 和 i 是用来设置匹配模式的标志。它们可以与正则表达式一起使用，以改变匹配的行为方式。

1. g 标志：全局匹配模式。当使用 g 标志时，正则表达式将匹配输入字符串中的所有匹配项，而不仅仅是第一个匹配项。

2. i 标志：忽略大小写匹配模式。当使用 i 标志时，正则表达式将忽略大小写，即不区分大小写地匹配字符。

例如，在 JavaScript 中，可以这样使用这些标志：

let str = "The cat and the hat are both cute.";
let regex = /the/gi; // 匹配 "the"，忽略大小写，并且全局匹配
let matches = str.match(regex);
console.log(matches); // 输出: ["The", "the", "the"]

在上面的例子中，使用了 g 和 i 标志来进行全局匹配和忽略大小写 匹配。这使得正则表达式可以匹配到输入字符串中所有满足条件的子串，并且不区分大小写。

image.png

image.png

正则表达式的的两大特性

image.png

image.png

image.png

正则与字符串方法

image.png

在 JavaScript 中，正则表达式与字符串方法结合使用，可以实现对字符串的搜索、匹配、替换等操作。以下是一些常用的字符串方法与正则表达式的结合使用：

1.match(): 使用正则表达式匹配字符串，并返回匹配的结果。如果正则表达式使用了全局标志 g，则 match() 方法将返回所有匹配的结果；否则只返回第一个匹配的结果。

image.png

let str = "The cat and the hat are both cute.";
let matches = str.match(/the/gi);
console.log(matches); // ["The", "the", "the"]

2. search(): 使用正则表达式搜索字符串中的匹配项，并返回匹配的第一个位置。如果找到匹配项，则返回匹配的索引；否则返回 -1。

image.png

let str = "The cat and the hat are both cute.";
let position = str.search(/cat/i);
console.log(position); // 4

3. replace(): 使用正则表达式在字符串中查找匹配的子串，并进行替换。可以使用正则表达式捕获的内容作为替换的一部分。

image.png

let str = "The cat and the hat are both cute.";
let newStr = str.replace(/the/gi, "a");
console.log(newStr); // "a cat and a hat are both cute."

4. split(): 使用正则表达式将字符串拆分为子串，并返回一个由子串组成的数组。

let str = "apple,banana,orange";
let arr = str.split(/,/);
console.log(arr); // ["apple", "banana", "orange"]

案例-密码验证强度

image.png

image.png

总结

期中考试啦！！！！！！！！！！

1d6ba29d3a238fefe2e37e10aafede7.jpg

avatar
文章
阅读
粉丝