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 Ajax.ashx 高效分页实现代码
Oct 20 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
Vue基础学习之项目整合及优化
Jun 02 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
PHP数组及条件,循环语句学习
2012/11/11 PHP
PHP修改session_id示例代码
2014/01/08 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python 爬虫的工具列表大全
2016/01/31 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
如何使用python切换hosts文件
2020/04/29 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
校三好学生主要事迹
2014/01/11 职场文书
离婚协议书范文
2015/01/26 职场文书
小学新课改心得体会
2016/01/22 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery