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中的ArrayBuffer详细介绍
Dec 08 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
js隐式转换的知识实例讲解
Sep 28 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
微信小程序实现图片上传放大预览删除代码
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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
php 文章采集正则代码
2009/12/28 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
Python之web模板应用
2017/12/26 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python3 max()函数基础用法
2019/02/19 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
工程资料员岗位职责
2014/03/10 职场文书
品牌服务方案
2014/06/03 职场文书
课内比教学心得体会
2014/09/09 职场文书
《1942》观后感
2015/06/08 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js
Java 多线程协作作业之信号同步
2022/05/11 Java/Android