一、引入

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

正好今天我又遇到这样的前端显示的需求，正好把相关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. numpy版本查看以及升降

     如题,参考:https://zhuanlan.zhihu.com/p/29026597 pip show numpy 查看numpy版本; pip install -U numpy==1.12.0, ...

  2. Win7 64位使用IDA Pro 6.8调试64位exe程序

    有点小坑,记录备忘. 首先搞个IDA Pro6.8,写本文时能找到的最高版本,试了下果然比6.6强大许多,其实6.6也没怎么用过...... 32位版本有个Local Win32 debugger,但 ...

  3. Chapter6 胞内信号网络

    一.一条从细胞表面到细胞核的通路 二.Ras蛋白处于复杂信号级联的中心位置 胞外信号→酪氨酸激酶受体→Shc→Grb→Sos→Ras 三.酪氨酸的磷酸化控制着许多胞内信号蛋白的定位与活动 Src蛋白的 ...

  4. UART串口通讯协议

    一.UART定义 UART 通用异步收发传输器(Universal Asynchronous Receiver/Transmitter),通常称作UART,是一种通用的串行异步全双工数据收发传输器(总 ...

  5. Android中的EventBus

    1.分析 EventBus是一个针对Android的事件发布和订阅的框架,主要功能是替代Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间传 ...

  6. iOS逆向之TheOS

    TheOS 被设计为一个在基于 Unix 平台 (Mac OS X.IOS…) 和大多数 的Linux 平台下开发 iOS 程序的集成开发环境.说是集成开发环境,其实就是给我们准备好了一些代码模板.预 ...

  7. sql-向已有数据的表添加约束

    语法: alter table 表名 with nocheck add constraint 约束名 约束类型 具体的约束说明 对表中现有的数据不做检查, 只对添加约束后再录入的数据进行检查. 例子: ...

  8. 手动封装on，emit，off

    on 绑定 emit 触发 off 解绑 //存放事件eventList = {key:valhandle:[]} 1对多on(eventName,callback);handle:-------N多 ...

  9. 一次对SNMP服务的渗透测试

    Hacking SNMP Service - The Post Exploitation :Attacking Network - Network Pentesting原文地址:http://www. ...

  10. ie被hao.360劫持的解决方法

    概述 之前无意中发现ie被hao.360劫持了,只要打开网址就会跳到hao.360,然后显示网络错误.网上试了几种解决方法,都不行,最后被我用重置ie浏览器的方法解决了.我总结了一下,把各种方案都记下 ...