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 相关文章推荐
JS清空多文本框、文本域示例代码
Feb 24 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
js实现随机数小游戏
Jun 28 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python群发邮件实例代码
2014/01/03 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
python Selenium 库的使用技巧
2020/10/16 Python
2014年两会学习心得体会
2014/03/10 职场文书
初中生评语大全
2014/04/24 职场文书
幼师求职信
2014/06/23 职场文书
公司委托书格式范文
2014/10/09 职场文书
党员公开承诺书2015
2015/01/21 职场文书
Python几种酷炫的进度条的方式
2022/04/11 Python
全网非常详细的pytest配置文件
2022/07/15 Python