一、引入

　　相信很多人都遇到过敏感信息需要做部分隐藏功能，大多数都是用特殊符号去替换。

正好今天我又遇到这样的前端显示的需求，正好把相关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实现用特殊符号替换字符串的中间部分区域的更多相关文章

  1. JS截取，删除，替换字符串常用方法详细

    删除和替换是一样的,开始用的是,如果是删除就直接替换为空 arr="abc001abc002abc003" arr.replace('abc','123') 结果发现只能替换第一个 ...

  2. js replace(a,b)之替换字符串中所有指定字符的方法

    var str = 'abcadeacf'; var str1 = str.replace('a', 'o'); alert(str1); // 打印结果: obcadeacf var str2 = ...

  3. js移除最后一个字符，js替换字符串的连接符号，js移除最后一个分隔符号

    js移除最后一个字符 js移除最后一个分隔符号 js替换字符串的连接符号 >>>>>>>>>>>>>>>> ...

  4. js替换字符串问题

    利用正则表达式配合replace替换指定字符. 语法 stringObject.replace(regexp,replacement) 参数 描述 regexp 必需.规定了要替换的模式的 RegEx ...

  5. js替换字符串的所有示例代码

    js如何替换字符串中所有. /** * 替换字符串中所有 * @param obj 原字符串 * @param str1 替换规则 * @param str2 替换成什么 * @return 替换后的 ...

  6. JS 利用正则表达式替换字符串

    JS 利用正则表达式替换字符串 博客分类: JavaScript 学习资料 Java代码 收藏代码 JS 利用正则表达式替换字符串 var data = "123123,213,12312, ...

  7. js使用占位符替换字符串

    js使用占位符替换字符串是一个ES6中的模版字符串语法. 在``中使用 ${} var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and ...

  8. 【JS新手教程】replace替换一个字符串中所有的某单词

    JS中的replace方法可以替换一个字符串中的单词.语句的格式是: 需要改的字符串.replace(字符串或正则表达式,替换成的字符串) 如果第一个参数用字符串,默认是找到该字符串中的第一个匹配的字 ...

  9. js判断网页标题包含某字符串则替换

    js判断网页标题包含某字符串则替换,代码如下: var tit=document.title; if(tit.indexOf("afish")>0){ tit=tit.rep ...

随机推荐

  1. delphi 中record 的类操作符重载简介

    今天简单介绍一下 delphi 中record 的类操作符重载使用,就是如何 实现 record 之间的简单操作. 关于类操作符重载 ,大家可以看官方的文档. Delphi allows certai ...

  2. vi分屏指令

    用vi打开,view打开vsplit不支持 命令模式下::new,新建文件并分屏, 快捷键,Ctrl+W,然后马上按n键:spilt 水平分屏,将当前屏分为两个,水平的.   Ctrl + w, s: ...

  3. 第一节20181109 《Linux就该这么学》

    在网上发现了刘老师的linux课程,关注了一段时间感觉很好就在10月1日活动日报了第19期的班,希望自己能坚持下来学好linux.

  4. Oracle通过序列+触发器实现主键自增

    接触oracle没多久,在建表的时候发现还不会如何设置主键自动增长.和mysql的设置为AUTO_INCREMENT属性相比,要复杂很多,所以现在记录起来. 我使用的是序列+触发器的方式. 现在已经创 ...

  5. noip第18课资料

  6. 用 Docker 构建、运行、发布来一个 Spring Boot 应用

    本文演示了如何用 Docker 构建.运行.发布来一个 Spring Boot 应用. Docker 简介 Docker 是一个 Linux 容器管理工具包,具备“社交”方面,允许用户发布容器的 im ...

  7. 背水一战 Windows 10 (78) - 自定义控件: 基础知识, 依赖属性, 附加属性

    [源码下载] 背水一战 Windows 10 (78) - 自定义控件: 基础知识, 依赖属性, 附加属性 作者:webabcd 介绍背水一战 Windows 10 之 控件(自定义控件) 自定义控件 ...

  8. React-Native 问题随记2： com.android.builder.testing.api.DeviceException

    错误详细: Execution failed for task ':app:installDebug'.> com.android.builder.testing.api.DeviceExcep ...

  9. SharkApktool 源码攻略

    作者:HAI_ 原文来自:https://bbs.ichunqiu.com/thread-43219-1-1.html 0×00 前言 网上的资料对于apktool的源码分析,来来回回就那么几个,而且 ...

  10. 第二十四节：Java语言基础-讲解数组的综合应用

    数组的综合应用 // 打印数组 public static void printArray(int[] arr) { for(int x=0;x<arr.length;x++) { if(x!= ...