js
let str = "1,234,567";
let newStr = str.replace(/,/g, ''); // 将所有逗号替换为空字符串
console.log(newStr); // 输出 "1234567"-
replace()：这是一个字符串方法，用于替换字符串中的某些部分。 -
/,/g：这是一个正则表达式，用于匹配字符串中的所有逗号（,）。/：表示正则表达式的开始和结束。,：表示要匹配的字符，这里是逗号。g：是一个修饰符，表示全局匹配（global），即替换字符串中所有的逗号，而不仅仅是第一个。
-
''：这是替换的内容，这里是一个空字符串，表示将匹配到的逗号替换为"无"。
总结
replace(/,/g, '') 的作用是从字符串中移除所有的逗号，返回一个不包含逗号的新字符串。
在正则表达式中，^ 和 $ 以及 /.../ 的使用场景有所不同。
^和$
^：用于匹配字符串的开头。$：用于匹配字符串的结尾。
使用场景
- 当需要确保整个字符串从头到尾都符合某个模式时，使用
^和$。
js
let str1 = "Hello";
let str2 = "Hello, World!";
let regex = /^Hello$/; // 只匹配完全等于 "Hello" 的字符串
console.log(regex.test(str1)); // 输出 true
console.log(regex.test(str2)); // 输出 false/.../
/.../是正则表达式的语法，用于定义一个正则表达式模式。
使用场景
- 当你需要创建一个正则表达式以匹配字符串中的某些模式时，使用
/.../。
js
let str = "Hello, World!";
let regex = /Hello/; // 匹配包含 "Hello" 的字符串
console.log(regex.test(str)); // 输出 true总结
- 使用
^和$来限制匹配的范围，确保字符串从头到尾符合某个模式。 - 使用
/.../来定义正则表达式模式，以便在字符串中查找或替换特定内容。
eg：
js
$(".form-edit .num").click(function () {
var oDiv = document.getElementById("input-box");
// 获取当前内容，去掉已有的逗号
var currentValue = oDiv.innerHTML.replace(/,/g, '');
// 追加当前点击的数字
currentValue += this.innerHTML;
// 使用正则表达式从右边每三位添加逗号
var formattedValue = currentValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// 更新 oDiv 的内容
oDiv.innerHTML = formattedValue;
});解释
正则表达式 (?=(\d{3})+(?!\d)) 是一个复杂的模式，主要用于在数字中每三位插入逗号。
组成部分
-
(?=...)：这是一个前瞻断言（lookahead assertion），用于检查后面是否有某个模式，但不消耗字符。也就是说，它只检查后面的内容，而不将其包含在匹配结果中。 -
(\d{3})+：\d：表示一个数字字符（0-9）。{3}：表示前面的模式（数字）出现 3 次。+：表示前面的模式（(\d{3})）可以出现一次或多次。这意味着可以有多个三位数字的组合。
-
(?!\d)：这是一个负向前瞻断言（negative lookahead assertion），用于确保后面没有数字字符。也就是说，匹配的地方后面不能跟着一个数字。
整体理解
- 整个表达式的意思是：在字符串中查找每个位置，确保这个位置后面有一个或多个三位数字的组合，并且这个位置后面不能再跟着其他数字。
- 这样可以确保在每三个数字之间插入逗号，而不会在字符串的末尾添加逗号。
任务参考实现
当用户输入的数字位数超过三位时，需要使用千分位分隔符（即英文逗号 ","）对金额进行分隔。
js
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<meta http-equiv="Cache-Control" content="no-store" />
<title>How Many Digits Can You See?</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="wrap">
<form action="" class="edit-cash">
<p>Total consumption amount</p>
<div class="shuru">
<span>$</span>
<div id="input-box"></div>
</div>
<p>Inquire with staff for the total amount payable.</p>
</form>
<input type="submit" value="Pay" class="submit" />
</div>
<div class="layer"></div>
<div class="form">
<form action="" method="post">
<input type="text" placeholder="name" />
<input type="text" placeholder="telephone" />
<input type="submit" value="submit" class="infor-sub" />
</form>
</div>
<div class="layer-content">
<div class="form-edit clearfix">
<div class="num num1">1</div>
<div class="num num2">2</div>
<div class="num num3">3</div>
<div class="num num4">4</div>
<div class="num num5">5</div>
<div class="num num6">6</div>
<div class="num num7">7</div>
<div class="num num8">8</div>
<div class="num num9">9</div>
<div class="num num0">0</div>
<div id="remove">Delete</div>
</div>
</div>
<script src="./jquery.min.js"></script>
<script>
$(function () {
$(".infor-sub").click(function (e) {
$(".layer").hide();
$(".form").hide();
e.preventDefault();
});
$(".shuru").click(function (e) {
$(".layer-content").animate(
{
bottom: 0
},
200
);
e.stopPropagation();
});
$(".wrap").click(function () {
$(".layer-content").animate(
{
bottom: "-200px"
},
200
);
});
$(".form-edit .num").click(function () {
var oDiv = document.getElementById("input-box");
oDiv.innerHTML = count("add", this.innerHTML);
});
$("#remove").click(function () {
var oDiv = document.getElementById("input-box");
oDiv.innerHTML = count("sub");
});
let dataArray = [];
function changeArray(array) {
array = JSON.parse(JSON.stringify(array));
if (array.length > 3) {
return array.join("").replace(/(?=\B(\d{3})+$)/g, ",");
} else {
return array.join("");
}
}
function count(option, str = null) {
if (option == "add") {
dataArray.push(str);
} else {
dataArray.pop();
}
return changeArray(dataArray);
}
});
</script>
</body>
</html>