一、引入

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

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

    self attention Q=K=V :输入一个句子,那么里面的每个词都要和该句子中的所有词进行attention计算,目的是要学习句子内部词之间的依赖关系,捕获句子的内部结构. 首先,要buil ...

  2. ABP框架系列之二：(Entity Framework Core-实体核心框架)

    Introduction(介绍) Abp.EntityFrameworkCore nuget package is used to integrate to Entity Framework (EF) ...

  3. JAVA核心问题（一）反射之引言 构造函数

    反射,简单来说,就是在运行时获取Class对象的所有属性和方法,无论公有私有.虽然是一个基础问题,在这里还是全面的记录一下,认真对待! 获取构造函数 构造函数大致分为两种,public和非public ...

  4. FileInputStream与FileOutputStreawm实现文件的加密与解密

  5. DSP builder安装指南（以9.1为例） 转自http://www.cnblogs.com/sleepy/archive/2011/06/28/2092362.html

    DSP Builder在算法友好的开发环境中帮助设计人员生成DSP设计硬件表征,从而缩短了DSP设计周期.已有的MATLAB函数和Simulink模块可以和Altera DSP Builder模块以及 ...

  6. MySQL与SQL语句的操作

    MySQL与SQL语句的操作 Mysql比较轻量化,企业用的是Oracle,基本的是熟悉对数据库,数据表,字段,记录的更新与修改 1. mysql基本信息 特殊数据库:information_sche ...

  7. git 包教包会

    # Git全面解析 版本控制工具:VSS.CVS.SVN.Git等,其中Git属于绝对霸主地位. 注意:一般版本控制工具包含两部分 客户端(本地):本地编写内容以及版本记录 服务端(网盘):将内容和版 ...

  8. [转]决策树在Kaldi中如何使用

    转自:http://blog.csdn.net/chenhoujiangsir/article/details/51613144 说明:本文是kaldi主页相关内容的翻译(http://kaldi-a ...

  9. 基于DobboX的SOA服务集群搭建

    本人第一次发博客,有什么不对的地方希望各位批评指正,我就不把文章copy过来了,直接上有道笔记的链接,希望各位喜欢. 第一部分: 准备工作 第二部分: dubbox的安装和使用 第三部分: RESTf ...

  10. Android 发展思路

    1. 做一个有 ‘特色’ 的程序员 Android 开发,本身并不是一个可以走得多远的方向,真正有价值的地方在于与具体的业务方向结合,比如:Android 与音视频技术,Android 与智能硬件交互 ...