这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

今天,我们要实现一个很常见并且简单的功能:将手机号中间的几位数变成****

这个功能其实很常见,比如我们微信的账号安全里面显示的手机号、掘金的账号设置里面显示的手机号、支付宝里面的证件号码、各大银行的App卡号.....还有很多有关系到我们私密的地方,在此就不一一例举了,看似简单的功能,我们该如何实现呢?

其实实现的方法有很多,在这里作者将使用js的方式来实现,如有不正确或者需要修改的地方,请多多指教,有更好的方法也可以留言~

下面所使用到的方法,相信学习过javaScript的小伙伴们都非常熟悉,但是你还记得他们的用法嘛?下面作者会对使用到的方法进行简单回顾,不太记得的小伙伴要去回顾一下了呢~

好了,废话少说,开始进入正题。

1. 第一种,使用字符串和数组中常见的几个方法。字符串方法:split()。数组方法:splice(),join()。

在实现之前,我们先一起来回顾一下这几个方法:

  1. split(): 将一个字符串拆分为一个子字符串数组,并返回该数组。

注释:该方法返回新数组,不会更改原始字符串。 注意:如果("")用作分隔符,则会对字符串进行逐个字符拆分。 www.w3school.com.cn/jsref/jsref…

下面是一个例子

const str = “hello”
let arr = str.split("");
console.log(arr); // h,e,l,l,o
  1. splice():方法向数组添加或从数组中删除项目,并返回删除的项目。

注释:splice() 该方法会改变原始数组。www.w3school.com.cn/jsref/jsref…

下面是一个例子:

const arr = ["a","b","c","d"];
arr.splice(1,2,"e","gg","d"); //从数字索引的第一位开始,删除两个内容,向数组添加”e“和”gg“两项。
console.log(arr); // ["a","e","gg","d"];
  1. join():将数组作为一个字符串返回。元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。

注释:join()该方法不会改变原数组

下面是一个例子:

const arr = ['a','b','c','d'];
let result = arr.join();
console.log(result); // a,b,c,d

实现功能:

const telphone = '13300009999';
let telArr = telphone.split();
telArr.splice(3,4,'****');
let result = telArr.join(); //因为不会改变原数组,需要用一个新的变量去接收
console.log(result); // 1330****999

2.第二种,利用字符串的substr()

  1. substr():该方法用于提取字符串的一部分。该方法从指定位置开始,并返回指定数量的字符。

注释:substr() 方法不会更改原始字符串。 下面是一个例子:

const str = 'Hello World';
let result = str.substr(1,4);
console.log(result); //ello

实现功能:

const telphone = '13300009999';
let result = telphone.substr(0,4) + '****' + telphone.substr(8);
console.log(result);// 1330****999 //第二句代码解释:
//使用 `substr` 方法截取电话号码的前四位,然后拼接上'****',
//再拼接上电话号码从索引为8开始的剩余部分,将结果赋值给变量result。

3.第三种,利用字符串的substring()和replace();

  1. substring():该方法用于从字符串中提取指定的索引(位置)之间的字符,并返回子字符串。 注释:substring() 方法不会更改原始字符串。 下面是一个例子:
const str = 'Hello World';
let result = str.substring(1,4);
console.log(result); //ell
  1. replace():该方法在字符串中搜索值或正则表达式;该方法返回已替换值的新字符串。

注释:replace() 方法不会更改原始字符串。 下面是一个例子:

const str = 'Hello World';
let result = str.replace("Hello","Hi");
console.log(result); //Hi World

实现功能:

const telphone = '13300009999';
let result = telphone.replace(telphone.substring(3,8),'****');
console.log(result);// 1330****999

上述的replace()提到了正则表达式,那么我们也可以使用正则表达式来实现www.w3school.com.cn/jsref/jsref… www.w3school.com.cn/js/js_regex…

  1. /d:查找数字
  2. 1,1,1,2,...,$99:与正则规则中的第1到第99个子表达式相匹配的文本。

实现功能:

const telphone = '13300009999';
const reg = /(\d{4})\d{4}(\d{3})/;
let result = telphone.replace(reg,"$1****$2");
console.log(result);// 1330****999

本文转载于:

https://juejin.cn/post/7271058595444752443

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--用js如何实现将手机号中间的几位数字变成****的更多相关文章

  1. AngularJS进阶(十三)JS利用正则表达式校验手机号

    JS利用正则表达式校验手机号 注:请点击此处进行充电! 绪 由于项目需求,需要在前端实现手机号码的校验.当然了,对于基本的格式校验应该放在客户端进行,而不需要再将待校验的手机号发送至服务端,在服务端完 ...

  2. 个人复习记录之-js

    1变量:内存中储存一个数据的储存空间. 使用:声明,赋值,取值.注 不能以数字开头,不能用保留字 *声明提前:在程序正式执行前,都会将所有var声明的变量提前到开始位置,集中创建***赋值留在原地** ...

  3. js正则表达式验证账号手机号电话邮箱

    1.账号 规则:字母.数字.下划线组成,字母开头,4-16位. 表达式:/^[a-zA-z]\w{3,15}$/: 2.手机号 规则:11位数字,以1开头 表达式:/^1\d{10}$/ 3.电话号码 ...

  4. 记录下 js各种证件的正则验证

    身份证 /(^\d{15}$)|(^\d{17}([0-9]|X)$)/    护照 /^[a-zA-Z0-9]{3,21}$/   /^(P\d{7})|(G\d{8})$/    军官证或士兵证 ...

  5. js 正则 以字母开头必须有 大小写字母数字组成 可以有“@"或 ”.“

    js  正则  以字母开头必须有 大小写字母数字组成 可以有“@"或 ”.“ var reg = /^[a-zA-Z]{1}(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d_@ ...

  6. js验证连续两位数字递增或递减和连续三位数字相同

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. js正则判断实现18位数字

    js实现18位数字 var stuCardReg = /^[0-9]{18}/; var stuCard = $('.inp).val();//获取input框中的数值 if (!stuCardReg ...

  8. 记录:sea.js和require.js配置 与 性能对比

    最近有点忙,很久无写博客,记录一下之前的配置require.js和sea.js的配置.(有误有望提出 require.js 文件目录 /app(项目使用js) /lib(require.js jq存放 ...

  9. 记录d3.js 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置

    项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...

  10. [Javascript摸鱼记录] 关于js简单字符删减替换增加插入追加前中后处理

    以前总是怕死js如其名,能让我入坑润不出来,然后最近被迫写点静态html,又要用到数值运算处理, 于是又开启了「好几十个标签栏解决一个问题」的"探索路程",顺便记录一下摸鱼结果希望 ...

随机推荐

  1. crontab 里如何创建带日期的日志文件

    需求在crontab 执行定时任务时,将执行的任务输出到带日期的文件中 crontab中,执行脚本需要传入系统时间date +"%Y-%m-%d" 问题今天遇到一个crontab问 ...

  2. Centos7部署django+uwsgi+nginx 转载: https://www.cnblogs.com/wztshine/p/16172154.html

    Centos7部署django+uwsgi+nginx   Django + uwsgi + nginx on Centos7 wsgi 介绍 本小节来自 廖雪峰 wsgi 一文 一个Web应用的本质 ...

  3. Smartctrl 命令使用说明

    一.smartctl工具简介  Smartmontools是一种硬盘检测工具,通过控制和管理硬盘的SMART(Self Monitoring Analysis and Reporting Techno ...

  4. GCC项目的文件组织和编译步骤分解

    C项目的文件组织和编译 C项目的代码, 由头文件(.h后缀)和C文件(.c后缀)组成 C语言的函数和变量, 分声明和定义两个阶段 头文件和C文件是等价的, 相当于C文件的一部分, 其功能由人为划分, ...

  5. 【Unity3D】地面网格特效

    1 前言 ​ 本文实现了地面网格特效,包含以下两种模式: 实时模式:网格线宽度和间距随相机的高度实时变化: 分段模式:将相机高度分段,网格线宽度和间距在每段中对应一个值. ​ 本文完整资源见→Unit ...

  6. 基于keras的卷积神经网络(CNN)

    1 前言 本文以MNIST手写数字分类为例,讲解使用一维卷积和二维卷积实现 CNN 模型.关于 MNIST 数据集的说明,见使用TensorFlow实现MNIST数据集分类.实验中主要用到 Conv1 ...

  7. 使用BP神经网络实现函数逼近

    1 一元函数逼近 1.1 待逼近函数 1.2 代码 clear,clc p=[-4:0.1:4]; %神经网络输入值 t=sin(0.5*pi*p)+sin(pi*p); %神经网络目标值 n=15; ...

  8. harbor镜像仓搭建相关问题

    1 环境 自己生成了SSL证书 证书目录与 harbor.cfg 文件中定义的路径需要一致 使用的是offline 包安装 执行 install.sh 脚本后,通过浏览器远程访问成功, 但是在别的机器 ...

  9. 走进Kaggle的未知领域:性别和年龄推断算法解析

    ​ 1.环境设置: 此环节将加载实现笔记本无缝功能的基本模块,包括NumPy.Pandas和TensorFlow等库.此外,它还建立了关键的环境常数,如图像尺寸和学习率,这对后续分析和模型训练至关重要 ...

  10. 记录一个错误:Unable to find a match: python-dev

    今天尝试在Linux下运行一个Python项目,在安装requirements.txt时报错 执行命令如下: [root@VM-16-8-centos cve-search]# pip3 instal ...