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 相关文章推荐
jQuery异步获取json数据方法汇总
Dec 22 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
vue登录以及权限验证相关的实现
Oct 25 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 curl的深入解析
2013/06/02 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
python实现字符串和日期相互转换的方法
2015/05/13 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Python实现的栈(Stack)
2018/01/26 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
学前教育专业毕业生自荐信
2013/10/03 职场文书
商业融资计划书
2014/04/29 职场文书
有关环保的标语
2014/06/13 职场文书
房租涨价通知
2015/04/23 职场文书
大学生求职意向书
2015/05/11 职场文书
教师听课学习心得体会
2016/01/15 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python