一、引入

　　相信很多人都遇到过敏感信息需要做部分隐藏功能，大多数都是用特殊符号去替换。

正好今天我又遇到这样的前端显示的需求，正好把相关JS记录下来，方便下次再用。

二、JS部分

/* 部分隐藏处理

** str 需要处理的字符串

** frontLen  保留的前几位

** endLen  保留的后几位

** cha  替换的字符串

*/

function plusXing(str, frontLen, endLen,cha) {

    var len = str.length - frontLen - endLen;

    var xing = '';

    for (var i = 0; i < len; i++) {

        xing += cha;

    }

    return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);

};

三、应用实例

 <!doctype html>

 <html lang="en">

  <head>

   <meta charset="UTF-8">

   <meta name="Generator" content="EditPlus®">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

   <title>隐藏字符</title>

   <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

   <style>

     div{

         margin:20px;

         padding:20px;

     }

     input[type='button']{

         padding:10px;

     }

     #btn_div{

         margin-left:100px;

     }

   </style>

  </head>

  <body>

   <div>处理之前：<input type="text" id="num"/></div>

   <div id='btn_div'><input type="button" value="隐藏处理" onclick="yincang();"></div>

   <div>处理之后：<span id="secret_num"></span></div>

   <script>

         function yincang(){

             var num=$('#num').val();

             var secret_num=plusXing(num,3,4,'*');

             $('#secret_num').text(secret_num);

         };

         /* 部分隐藏处理

         ** str 需要处理的字符串

         ** frontLen  保留的前几位

         ** endLen  保留的后几位

         ** cha  替换的字符串

         */

         function plusXing(str, frontLen, endLen,cha) {

             var len = str.length - frontLen - endLen;

             var xing = '';

             for (var i = 0; i < len; i++) {

                 xing += cha;

             }

             return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);

         };

   </script>

  </body>

 </html>

隐藏部分字符串

四、实例效果

　　

五、总结

　　这样就实现了前端显示的隐藏部分敏感信息的功能了。

　　其实这个功能完全可以在后台实现，那样应该是更安全的！

JS实现用特殊符号替换字符串的中间部分区域的更多相关文章

  1. JS截取，删除，替换字符串常用方法详细

    删除和替换是一样的,开始用的是,如果是删除就直接替换为空 arr="abc001abc002abc003" arr.replace('abc','123') 结果发现只能替换第一个 ...

  2. js replace(a,b)之替换字符串中所有指定字符的方法

    var str = 'abcadeacf'; var str1 = str.replace('a', 'o'); alert(str1); // 打印结果: obcadeacf var str2 = ...

  3. js移除最后一个字符，js替换字符串的连接符号，js移除最后一个分隔符号

    js移除最后一个字符 js移除最后一个分隔符号 js替换字符串的连接符号 >>>>>>>>>>>>>>>> ...

  4. js替换字符串问题

    利用正则表达式配合replace替换指定字符. 语法 stringObject.replace(regexp,replacement) 参数 描述 regexp 必需.规定了要替换的模式的 RegEx ...

  5. js替换字符串的所有示例代码

    js如何替换字符串中所有. /** * 替换字符串中所有 * @param obj 原字符串 * @param str1 替换规则 * @param str2 替换成什么 * @return 替换后的 ...

  6. JS 利用正则表达式替换字符串

    JS 利用正则表达式替换字符串 博客分类: JavaScript 学习资料 Java代码 收藏代码 JS 利用正则表达式替换字符串 var data = "123123,213,12312, ...

  7. js使用占位符替换字符串

    js使用占位符替换字符串是一个ES6中的模版字符串语法. 在``中使用 ${} var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and ...

  8. 【JS新手教程】replace替换一个字符串中所有的某单词

    JS中的replace方法可以替换一个字符串中的单词.语句的格式是: 需要改的字符串.replace(字符串或正则表达式,替换成的字符串) 如果第一个参数用字符串,默认是找到该字符串中的第一个匹配的字 ...

  9. js判断网页标题包含某字符串则替换

    js判断网页标题包含某字符串则替换,代码如下: var tit=document.title; if(tit.indexOf("afish")>0){ tit=tit.rep ...

随机推荐

  1. 自己封装的简单DbDao

    首先,DbDao是一个用来操作数据库的类.需要对数据库的驱动包 要操作数据库首先要获得链接,这时候就需要链接数据库的所有参数了,包括driver,url,user,password.(全部定义为pri ...

  2. SQL Server CTE 递归查询全解 -- 转 学习

    在TSQL脚本中,也能实现递归查询,SQL Server提供CTE(Common Table Expression),只需要编写少量的代码,就能实现递归查询,本文详细介绍CTE递归调用的特性和使用示例 ...

  3. Python序列结构--列表(一)

    列表 列表**包含若干元素的有序连续内存空间**,当列表增加或删除元素时,**列表对象自动进行内存的扩展或收缩**,从而**保证相邻元素之间没有缝隙**.但插入和删除非尾部元素时涉及列表元素大量的移动 ...

  4. faster-RCNN台标检测

    最近学习了faster-RCNN算法,收获不少,记此文为证.faster-RCNN是一个目标检测算法,它能够识别多个目标,对目标分类并标注位置,非常好用.它的输入样本是标注好的图片,输出是一个hdf5 ...

  5. Python自动化编程-树莓派GPIO编程(二)

    树莓派我们编程一般都直接用高效的python,针对于GPIO编程,python也是有这一方面的库的,这里最有名也是最常用的就是RPI.GPIO了.这个库是专门为树莓派GPIO编程所设计的,利用它你可以 ...

  6. nova scheduler filters 配置

    scheduler_driver = nova.scheduler.filter_scheduler.FilterScheduler scheduler_default_filters = Avail ...

  7. cad.net DeepCloneObjects WasErased

    /// <summary> /// 克隆图元到块表记录 /// </summary> /// <param name="objId">id数组& ...

  8. location-alias

    location /images/ { alias /project/pic/; } 给定的路径对应于location的"/url" 这个URL; /images/f.jpg -- ...

  9. jmeter获取cookies信息（配置）

    jmeter发送请求后,响应信息里获取不到cookies(实际上会返回一个cookies),解决方法: 在jmeter.properties里找到CookieManager.save.cookies, ...

  10. Windows.UI.Cred.dll损坏导致不能设置 PIN 密码

    心血来潮,重装系统. 然后发现不能设置 PIN,UWP界面在输完两个PIN后直接卡死(第一次设置的时候不需要输入第一行的PIN) google无果,打开系统日志,发现 上网下载一个对应版本的Windo ...