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 相关文章推荐
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
微信小程序实现图片上传放大预览删除代码
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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php绘制一个扇形的方法
2015/01/24 PHP
php扩展开发入门demo示例
2019/09/23 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
python表格存取的方法
2018/03/07 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
C#中的验证控件有几种
2014/03/08 面试题
UNIX特点都有哪些
2016/04/05 面试题
领导接待方案
2014/03/13 职场文书
《海底世界》教学反思
2014/04/16 职场文书
一分钟演讲稿
2014/04/30 职场文书
演讲比赛策划方案
2014/06/11 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
MySQL存储过程及语法详解
2022/08/05 MySQL