一个简单的用javascript实现的页面内容过滤显示小程序源码

最新推荐文章于 2021-06-03 18:06:30 发布

ruanzhengly

最新推荐文章于 2021-06-03 18:06:30 发布

阅读量985

点赞数

分类专栏： JavaScript 文章标签： javascript filter 正则表达式 firefox function null

本文链接：https://blog.csdn.net/ruanzhengly/article/details/1477979

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一个简单的使用javascript实现的，根据用具输入,动态过滤页面显示内容的小程序。使用了正则表达式匹配用户输入，忽略前后空格，忽略大小写，兼容IE6.0和Firefox2.0。

前阵子没事的时候做着玩得，当时只在IE下实现，今天修改了一下，兼容firefox，还费了一番功夫。没办法，现在做的项目只要求IE,结果就对兼容性的东西了解的不是很多，看来以后还要努力啊。哈哈。

下面是完整的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>textFilter</title>
  <script type="text/javascript">
   var folderE = null;
   var filterE = null;
   var iniVars = null;

   function init(){
    folderE = document.getElementById("folder");
    filterE = document.getElementById("filter");
    getIniVars();
   }

   //使用正则表达式来匹配,忽略前后空格，忽略大小写，兼容IE6.0和Firefox2.0
   function filter(){
    var filterValue = trim(filterE.value);
    var folderLength = folderE.childNodes.length;
    var pattern = new RegExp("^"+filterValue,"i");
    for (var i = 0;i < folderLength;i++) {
     folderE.removeChild(folderE.childNodes[folderLength-1-i]);
    }
    for (var i = 0;i<iniVars.length;i++) {
     if (pattern.test(trim(iniVars[i]))) {
      var aLi = document.createElement("LI");
      //innerText只有IE支持，所以这里用
      aLi.innerHTML = trim(iniVars[i]);
      folderE.appendChild(aLi);
     }
    }
   }

   function trim(x){
    return x.replace(/(^/s*)|(/s*$)/g, "");
   }
  </script>
</head>
<body onLoad="init()">
  <div style="width:200px;float:left;">implement js filter function</div>
  <div style="float:left;width:100px;">
   <input type="text" name="filter" onKeyUp="filter()" id="filter" />
  </div>
  <div style="clear:both;"></div>
  <ul id="folder">
   <li>aaa</li>
   <li>bbb</li>
   <li>ccc</li>
   <li>ab</li>
   <li>bc</li>
   <li>ca</li>
   <li>ac</li>
   <li>ba</li>
   <li>cb</li>
  </ul>
</body>
</html>

ruanzhengly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的用javascript实现的页面内容过滤显示小程序源码

一个简单的使用javascript实现的，根据用具输入,动态过滤页面显示内容的小程序。使用了正则表达式匹配用户输入，忽略前后空格，忽略大小写，兼容IE6.0和Firefox2.0。前阵子没事的时候做着玩得，当时只在IE下实现，今天修改了一下，兼容firefox，还费了一番功夫。没办法，现在做的项目只要求IE,结果就对兼容性的东西了解的不是很多，看来以后还要努力啊。哈哈。下面是完整的代码：
复制链接

扫一扫

专栏目录