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 相关文章推荐
javascript数组的使用
Mar 28 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
php的一些小问题
2010/07/03 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
php实现头像上传预览功能
2017/04/27 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
python监控文件并且发送告警邮件
2018/06/21 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
python中下标和切片的使用方法解析
2019/08/27 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python运算符+与+=的方法实例
2021/02/18 Python
String这个类型的class为何定义成final?
2012/11/13 面试题
十岁生日家长答谢词
2014/01/17 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python