JS实现用特殊符号替换字符串的中间部分区域的实例代码


Posted in Javascript onJuly 24, 2018

一、引入

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

       正好今天我又遇到这样的前端显示的需求,正好把相关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实现用特殊符号替换字符串的中间部分区域的实例代码JS实现用特殊符号替换字符串的中间部分区域的实例代码

五、总结

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

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

以上所述是小编给大家介绍的JS实现用特殊符号替换字符串的中间部分区域的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 Javascript
js闭包的9个使用场景
Dec 29 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
微信小程序实现图片上传放大预览删除代码
Jun 28 #Javascript
vue实现底部菜单功能
Jul 24 #Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 #Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 #Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 #Javascript
JavaScript引用类型Array实例分析
Jul 24 #Javascript
详解微信小程序调起键盘性能优化
Jul 24 #Javascript
You might like
php URL编码解码函数代码
2009/03/10 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python简单获取自身外网IP的方法
2016/09/18 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python实现的快速排序算法详解
2017/08/01 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
详解python算法之冒泡排序
2019/03/05 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
经济系大学生求职信
2013/10/01 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
Java并发编程必备之Future机制
2021/06/30 Java/Android