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 JavaScript获取Url参数,src属性参数
Mar 09 Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
js 异步处理进度条
Apr 01 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 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之PHP语法学习笔记1
2006/12/17 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
Flask框架配置与调试操作示例
2018/07/23 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
我的教育故事演讲稿
2014/05/04 职场文书
品牌服务方案
2014/06/03 职场文书
学校创先争优活动总结
2014/08/28 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
篮球赛新闻稿
2015/07/17 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js
基于Python实现nc批量转tif格式
2022/08/14 Python