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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
js仿360开机效果
Dec 26 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 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
操作Oracle的php类
2006/10/09 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
详解JS函数重载
2014/12/04 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
JS二分查找算法详解
2017/11/01 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
Django入门使用示例
2017/12/12 Python
Python自定义线程池实现方法分析
2018/02/07 Python
详解python3中tkinter知识点
2018/06/21 Python
python format 格式化输出方法
2018/07/16 Python
keras:model.compile损失函数的用法
2020/07/01 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
兼职业务员岗位职责
2014/01/01 职场文书
上课睡觉检讨书
2014/01/28 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android