vue计算属性实现姓名、手机号脱敏(替换字符串中间四位为星号)

实现结果：

姓名脱敏规则：

        姓名两个字=>显示姓,名用*代替

        姓名三个字=>显示第一位和第三位,第二位用*代替

        姓名大于四个字=>第二位第三位*号代替,其余正常显示

手机号脱敏规则：

        仅显示前三位及后四位数字，隐藏信息用*代替

页面标签:

<!-- 姓名 -->
<view class="name">
	<view class="name-title">真实姓名</view>
	<view class="name-content">{{ acturalname }}</view>
</view>
<!-- 绑定手机号 -->
<view class="phone-number">
	<view class="phone-number-title">绑定手机号</view>
	<view class="phone-number-content">{{ phoneNumbe }}</view>
</view>

data数据源:

data() {
	return {
		phone: '12345678910',
		name: '张三'
	};
},

计算属性:

computed: {
	phoneNumbe() {
		// 手机号仅显示前三位及后四位数字，隐藏信息用*代替
		return this.phone.substr(0, 3) + '****' + this.phone.substring(7);
	},
	acturalname() {
		if (this.name.length == 2) {
			//截取name 字符串截取第一个字符，
			return this.name.substring(0, 1) + '*';
		} else if (this.name.length == 3) {
			//截取第一个和第三个字符
			return this.name.substring(0, 1) + '*' + this.name.substring(2, 3);
		} else if (this.name.length > 3) {
			//截取第一个和大于第4个字符
			return (
				this.name.substring(0, 1) + '*' + '*' + this.name.substring(3, this.name.length)
			);
		}
	}
},

 

js 替换字符串中间四位为星号

你可以使用 JavaScript 的字符串操作来替换字符串中间四位为星号。

下面是一个示例代码：

function replaceMiddleWithStars(str) {
  if (str.length < 8) {
    return str;
  }

  var start = Math.floor((str.length - 4) / 2);
  var end = start + 4;

  var stars = '****';
  var replacedStr = str.substring(0, start) + stars + str.substring(end);

  return replacedStr;
}

var originalStr = "1234567890";
var replacedStr = replaceMiddleWithStars(originalStr);

console.log(replacedStr); // 输出：1234****90

在这个示例中，replaceMiddleWithStars 函数接受一个字符串作为输入，并返回替换后的字符串。

首先，我们检查输入字符串的长度是否小于8，如果小于8，则不需要进行替换操作，直接返回原始字符串。

接下来，我们计算需要替换的字符串的起始位置和结束位置。我们假设要替换的字符串长度为4，那么起始位置就是 (str.length - 4) / 2，结束位置就是起始位置加上4。

然后，我们定义一个包含4个星号的字符串 stars，并使用 substring 方法将原始字符串分为三部分：起始位置之前的部分、需要替换的部分、结束位置之后的部分。最后，我们将这三部分拼接在一起，得到最终的替换后的字符串。

在示例中，我们使用了输入字符串 "1234567890" 进行测试，结果输出为 "1234****90"。

请注意，这个示例只是一种简单的实现方式，并且假定需要替换的字符串长度固定为4。