JS实现将手机号中间的几位数字变成****功能

 更新时间:2023年09月18日 08:58:32   作者:林恒  
这篇文章主要介绍了用js如何实现将手机号中间的几位数字变成**** _,今天,我们要实现一个很常见并且简单的功能如何将手机号中间的几位数变成****,需要的朋友可以参考下

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

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

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

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

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

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

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

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

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

下面是一个例子

const str = “hello”
let arr = str.split("");
console.log(arr); // h,e,l,l,o
  • 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"];
  • 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()

  • 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();

  • substring():该方法用于从字符串中提取指定的索引(位置)之间的字符,并返回子字符串。 注释:substring() 方法不会更改原始字符串。 下面是一个例子:

const str = 'Hello World';
let result = str.substring(1,4);
console.log(result); //ell
  • 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…

  • /d:查找数字
  • 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

到此这篇关于用js如何实现将手机号中间的几位数字变成****的文章就介绍到这了,更多相关js手机号中间的几位数字变成****内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 奉献给JavaScript初学者的编写开发的七个细节

    奉献给JavaScript初学者的编写开发的七个细节

    每种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节,与大家分享。
    2011-01-01
  • jquery方法+js一般方法+js面向对象方法实现拖拽效果

    jquery方法+js一般方法+js面向对象方法实现拖拽效果

    多种方法制作的div拖拽,简单实用,包括了jquery方法、js一般方法、js面向对象方法
    2012-08-08
  • JavaScript图片处理与合成总结

    JavaScript图片处理与合成总结

    这篇文章主要介绍了JavaScript图片处理与合成的相关知识点以及相关实例代码分析,有兴趣的朋友学习下。
    2018-03-03
  • Bootstrap插件全集

    Bootstrap插件全集

    这篇文章主要为大家详细介绍了Bootstrap插件,包括Bootstrap过渡效果插件、Bootstrap下拉菜单插件等,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JavaScript中使用Substring删除字符串最后一个字符

    JavaScript中使用Substring删除字符串最后一个字符

    删除字符串最后一个字符的方法有很多,在本文将为大家介绍下js中的substring是如何做到的,需要的朋友可以参考下
    2013-11-11
  • 在Javascript中使用DTO的示例详解

    在Javascript中使用DTO的示例详解

    在我们讨论实际实现之前,让我们先介绍一下DTO,它的含义是什么,何时使用以及 javascript/nodejs 项目中对它的真正需求,需要的朋友可以参考下
    2023-12-12
  • 在JavaScript中创建对象的可行方法小结

    在JavaScript中创建对象的可行方法小结

    在Web前端开发中,JavaScript是一门功能强大的语言,其核心之一便是对象的创建与操作,对象是JavaScript中数据结构的重要组成部分,本文将深入探讨JavaScript中创建对象的各种方法,并结合代码示例和实际开发经验进行详细讲解,需要的朋友可以参考下
    2025-03-03
  • JavaScript开发中需要搞懂的字符编码总结

    JavaScript开发中需要搞懂的字符编码总结

    字符集就是字符的集合,字符编码则代表字符集的实际编码规则,是用于计算机解析字符的。本文为大家整理了JavaScript开发中需要搞懂的字符编码,希望对大家有所帮助
    2023-02-02
  • IE8中动态创建script标签onload无效的解决方法

    IE8中动态创建script标签onload无效的解决方法

    这篇文章主要介绍了IE8中动态创建script标签onload无效的解决方法,涉及针对javascript加载顺序的调整,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 浅谈$_FILES数组为空的原因

    浅谈$_FILES数组为空的原因

    下面小编就为大家带来一篇浅谈$_FILES数组为空的原因。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02

最新评论