一、引入

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

正好今天我又遇到这样的前端显示的需求，正好把相关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. Python Day 3

    阅读目录: 内容回顾: 变量(标识符)的命名规范: 常量: 格式化输入\输出: 注释: 基本数据类型: 运算符: ##内容回顾 1.语言的分类: -- 机器语言:直接编写0,1指令,直接能被硬件执行. ...

  2. C#延时函数

    用Thread方法: 先using system.threading; 再在需要延时的进程处插入 thread.sleep(int);

  3. 独一无二 hortonworks spark 源码编译教程

    hortonworks的源码在github上能找到! https://github.com/hortonworks/spark2-release 找到对应版本release源码后下载到本地 在wind ...

  4. Python开发——3.基本数据类型之列表、元组和字典

    一.列表(list) 1.列表的格式 li = [11,22,"kobe",["lakers","ball",11],(11,22,),{& ...

  5. python_day1_常量

    常量 定义: 不变的量为常量,或在程序中不可改变的量 用法: AGE_OF_BOY  =56 注:在Python中没有一个专门的语法代表常量,程序员约定俗成用变量名全部大写代表常量

  6. Linux命令之tee - 重定向输出到多个文件

    http://codingstandards.iteye.com/blog/833695 tee 将标准输出复制一份 ls -al | tee -a tmpls.log ls -al >> ...

  7. Windows平台下载Android源码（整理）

    Google官方下载源码使用的系统Ubuntu系统,不过现在我们需要在Windows系统中下载Android源码文件. 网站的地址是:https://android.googlesource.com/ ...

  8. UBUNTU14.0.4安装eclipse

    jdk工具下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 点击这个下载 ...

  9. 用VerilogHDL设计一个与门逻辑，并进行前仿和后仿

    执行菜单命令[File]-[New Project Wizard…],创建工程向导. 在What is the working directory for this project?下选择项目存储地址 ...

  10. SQL SERVER占用CPU过高优化

    操作系统是Windows2008R2 ,数据库是SQL2014 64位. 近阶段服务器出现过几次死机,管理员反馈机器内存使用率100%导致机器卡死.于是做了个监测服务器的软件实时记录CPU数据,几日观 ...