注释部分对原理的理解是否正确？

来源：3-43 利用replace方法完善正则测试工具

慕前端5517794

2019-06-19 13:25:50

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>正则表达式测试工具</title>
<style>
#regexp {
width: 650px;
margin: 100px auto;
font-size: 14px;
}
#regexp .title {
color: #777;
font-size: 24px;
text-align: center;
}
#regexp .textbox {
width: 638px;
height: 150px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
resize: none;
}
#regexp .readonly {
background-color: #eee;
}
#regexp .textfield {
width: 215px;
padding: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>

<div id="regexp">
<h1 class="title">正则表达式测试工具</h1>
<textarea id="userText" class="textbox" placeholder="在此输入待匹配的文本"></textarea>
<p>
正则表达式：<input type="text" id="userRegExp" class="textfield" placeholder="在此输入正则表达式" />
<input type="checkbox" name="userModifier" value="i" />忽略大小写
<input type="checkbox" name="userModifier" value="g" />全局匹配
<input type="checkbox" name="userModifier" value="m" />多行匹配
<input type="button" id="matchingBtn" value="测试匹配" />
</p>
匹配结果：
<!-- textarea不支持嵌套标签，更改为div -->
<div id="matchingResult" class="textbox readonly"></div>
<p>
替换文本：<input type="text" id="userReplaceText" class="textfield" placeholder="在此输入替换文本" />
<input type="button" id="replaceBtn" value="替换" />
</p>
替换结果：
<div id="replaceResult" class="textbox readonly"></div>
</div>

<script>
var userText = document.getElementById('userText'),
userRegExp = document.getElementById('userRegExp'),
userModifier = document.getElementsByName('userModifier'),
matchingBtn = document.getElementById('matchingBtn'),
matchingResult = document.getElementById('matchingResult'),
userReplaceText = document.getElementById('userReplaceText'),
replaceBtn = document.getElementById('replaceBtn'),
replaceResult = document.getElementById('replaceResult');
var pattern,
    // 保存模式修饰符
modifier = '';
    
    // userModifier为NodeList节点列表，通过循环添加点击事件
for (var i = 0; i < userModifier.length; i++) {
userModifier[i].onclick = function () {
// 每次点击需清空modifier，否则每次使用选中的值为不断累加，如iig
modifier = '';
// 再次循环并判断节点是否被选中
for (var j = 0; j < userModifier.length; j++) {
// checked判断复选框是否被选中
if (userModifier[j].checked) {
// 当前节点的value值累加至modifier(保存模式修饰符)
modifier += userModifier[j].value;
}
}
}
}

matchingBtn.onclick = function () {
if (!userText.value) {
alert('请输入待匹配的文本！');
userText.focus();
// 停止执行以下代码
return;
}
if (!userRegExp.value) {
alert('请输入正则表达式！');
userRegExp.focus();
return;
}
// 给替换的内容两边添加标签，需要分组，不然无法引用
pattern = new RegExp('(' + userRegExp.value + ')', modifier);
// 执行exec是为了判断用户输入的文本(userText.value)是否匹配正则，如果匹配则引用分组($1)，
// 分组匹配到后的字符串被$1替换，而其带有span标签和黄色样式会一同添加，如果未匹配显示没有匹配
// 不使用三元操作符的情况下，||两边皆为false，userText.value赋值replaceResult.innerHTML原样返回
matchingResult.innerHTML = pattern.exec(userText.value) ? userText.value.replace(pattern, '<span style="background-color: yellow;">$1</span>') : '(没有匹配)';
console.log(matchingResult.innerHTML);
console.log(userText.value.replace(pattern, '<span style="background-color: yellow;">$1</span>') === true);
console.log('(没有匹配)' == true);
}
replaceBtn.onclick = function () {
// 检测替换文本输入框没有输入
if (!userReplaceText.value) {
alert('请输入要替换成的文本！');
// 未输入替换文本，光标焦点定位至替换文本输入框
userReplaceText.focus();
return;
}
// 如果pattern匹配得到userText.value相应字符串，则添加红色样式。如果没有匹配到，userText.value赋值replaceResult.innerHTML原样返回
replaceResult.innerHTML = userText.value.replace(pattern, '<span style="color: red;">' + userReplaceText.value + '</span>');
console.log(userText.value);
}
</script>
</body>
</html>

麻烦老师帮忙看下，谢谢

写回答

1回答