【JaveScript】总结一下看的正则应用例子(顺便一些关于DOM的印象)

最新推荐文章于 2022-07-23 11:00:44 发布

akueq

最新推荐文章于 2022-07-23 11:00:44 发布

阅读量134

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/fqq_5280/article/details/81274800

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

DOM(Document Object Model)(文档对象模型)

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素
通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

（简而言之，JS能改变所有，只要你想）

HTML DOM 允许 JavaScript 改变 HTML 元素的内容
- 修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
- 如需改变 HTML 元素的内容，请使用这个语法
  document.getElementById(id).innerHTML=new HTML
- 如需改变 HTML 元素的属性，请使用这个语法：
  document.getElementById(id).attribute=new value
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应
- 主要事件有 onclick onload onunload onchange onmouseover onmouseout onmousedown onmouseup

敏感词过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    window.onload=function () {
      var oTxt1=document.getElementById('txt1');
      var oTxt2=document.getElementById('txt2');
      var oBtn=document.getElementById('btn1');

      oBtn.onclick=function () {
        var re=/北京|百度|淘宝/g;
        oTxt2.value=oTxt1.value.replace(re,"****");
      };
    };
  </script>
</head>
<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br>
<input id="btn1" type="button" value="过滤"/><br>
<textarea id="txt2" rows="10" cols="40"></textarea>
<script>

</script>
</body>
</html>

过滤HTML标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> html标签过滤 </title>
</head>
<body>
<script>
  window.onload=function () {
    var oTxt1 = document.getElementById('txt1');
    var oTxt2 = document.getElementById('txt2');
    var oBtn = document.getElementById('btn1');

    oBtn.onclick=function () {
      var re=/<[^<>]+>/g; //  <>中间除了 < > 不能出现之外，其他都可以。
      oTxt2.value=oTxt1.value.replace(re,' ');
    }
  }
</script>
<textarea id="txt1" rows="10" cols="40"></textarea><br>
<input id="btn1" type="button" value="过滤"/><br>
<textarea id="txt2" rows="10" cols="40"></textarea>
</body>
</html>

邮箱验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邮箱校验</title>
</head>
<body>
<script>
  window.onload=function () {
    var oTxt1=document.getElementById('txt1');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function () {
      var re = /^\w+@[a-z0-9]+\.[a-z]+$/i;
      //  ^ 是句首的意思 $ 是句尾的意思
      if(re.test(oTxt1.value)){
        alert("合法的邮箱");
      }else{
        alert("错了");
      }
    }
  }
</script>

<input id="txt1" type="text"/><br>
<input id="btn1" type="button" value="校验"/><br>
</body>
</html>