js正则表达式-根据首尾字符串做匹配替换

最新推荐文章于 2024-07-14 12:56:18 发布

nannan408

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量2.2k

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.前言.
js正则表达式博大精深，只能一步一步去探索。其中字符串匹配替换是经常需要用到的。下面举个例子。
2.例子。
实现首尾字符串变色。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
     <script type="text/javascript">
     //需要匹配的字符串
     var content="few相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.feww";
    /*
     * 方法用途 :匹配的方法，实现将所有满足条件的，首尾相间两个字符串v1和v2变红色，中间的串不变,并将改变的字符串嵌入div里面
     *     例子 :如"kk相bb息",被替换后变为"kk相bb息","相"和"息"都变成红色
     *       v1:要匹配的开始的字符串
     *       v2:要匹配的结束的字符串
    **/
    function gl(v1,v2){
       content=document.getElementById("test").value;
       v1=document.getElementById("test1").value;
       v2=document.getElementById("test2").value;
       //将两个字符串的正则表达式进行组装，三个括号代表三个需要匹配的地方
       var strk="(\s*)"+"(\\"+v1+"+)"+"*(\\"+v2+"+)\*";
       //进行全局多次匹配
       var reg=new RegExp(strk,"gmi");
       //分别将匹配的第二个和第三个参数变红色
       var rep=content.replace(reg,"$1<font color=\"red\">$2</font><font color=\"red\">$3</font>");
       //将结果嵌入div,以便让我们看到
       document.getElementById("test3").innerHTML=rep;
   }
     </script>
    请输入:要过滤的字符串:   <input id="test" value="few相,相fje相fjeiwow息iwo" size="300" /><br/>
     请输入首字符串:<input id="test1" value="相" size="300" /><br/>
    请输入 尾字符串: <input id="test2" value="息" size="300" /><br/>
  <button id="testB" onclick="gl('相','息')">过滤</button><br/>
      <div id="test3">feww</div><br/>
  </body>
</html>

实现根据数组进行过滤:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
     <script type="text/javascript">
     //需要匹配的字符串
     var content="few相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.feww";

    var array=['电影','B样','发票','炒蛋'];
    function guolv(){
       var content=document.getElementById("test").value;
       for(var i=0;i<4;i++){
       var keyword=array[i];
       var strk="("+keyword+"+)";
       var reg=new RegExp(strk,"gmi");
       var result=content.replace(reg,"<font color=\"red\">$1</font>");
       content=result;

       }
        //将结果嵌入div,以便让我们看到
      document.getElementById("test3").innerHTML=content;

    }


     </script>
         请输入:要过滤的字符串:   <input id="test" value="'电影','B样#$%&fwefew电影电影wfe,'发票','炒蛋'" size="300" /><br/>
     <br/>
     (1)过滤简单的<br/>
  <button id="testB" onclick="guolv()">过滤</button><br/>
      <div id="test3">feww</div><br/>
      <br/>



  </body>
</html>

nannan408

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js正则表达式-根据首尾字符串做匹配替换

1.前言. js正则表达式博大精深，只能一步一步去探索。其中字符串匹配替换是经常需要用到的。下面举个例子。2.例子。实现首尾字符串变色。[code="java"] MyHtml.html //需要匹配的字符串 var co...
复制链接

扫一扫