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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
jQuery实现元素的插入
Feb 27 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
微信小程序实现图片上传放大预览删除代码
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
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
BootStrap中
2016/12/10 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
python with statement 进行文件操作指南
2014/08/22 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python实现数据库编程方法详解
2015/06/09 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
python excel转换csv代码实例
2019/08/26 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
Python requests模块cookie实例解析
2020/04/14 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
关于毕业的中学校园广播稿
2014/01/26 职场文书
探亲邀请信范文
2014/01/30 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
电话客服工作职责
2014/07/27 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
数学教师个人总结
2015/02/06 职场文书