基于HTML，实现需求
- 按照HTML中按钮的描述以此实现功能
- 计算结果显示在 id 为 result 的 P 标签中
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <title>JS里的居民们2</title>
7
8 </head>
9
10 <body>
11 <div>
12 <label>String A:
13 <input id="radio-a" type="radio" checked="true" name="str-obj" value="a">
14 </label>
15 <textarea id="str-a"></textarea>
16 <label>String B:
17 <input id="radio-b" type="radio" name="str-obj" value="b">
18 </label>
19 <textarea id="str-b"></textarea>
20 <label>Num A：<input id="num-a" type="number" value="0"></label>
21 <label>Num B：<input id="num-b" type="number" value="1"></label>
22 </div>
23 <div>
24 <button>获取当前选中输入的内容长度</button>
25 <button>当前选中输入中的第3个字符</button>
26 <button>把两个输入框的文字连接在一起输出（concat）</button>
27 <button>输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）</button>
28 <button>输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）</button>
29 <button>使用slice获取选中输入框内容的部分内容，参数为num-a及num-b</button>
30 <button>当前选中输入框的行数</button>
31 <button>使用substr获取选中输入框内容的子字符串，参数为num-a及num-b</button>
32 <button>把所选输入框中的内容全部转为大写</button>
33 <button>把所选输入框中的内容全部转为小写</button>
34 <button>把所选输入框中内容的半角空格全部去除</button>
35 <button>把所选输入框中内容的a全部替换成另外一个输入框中的内容</button>
36 </div>
37 <p id="result"></p>
38 <script>
39 const numA = document.getElementById("num-a");
40 numB = document.getElementById("num-b");
41 radioA = document.getElementById("radio-a");
42 radioB = document.getElementById("radio-b");
43 strA = document.getElementById("str-a");
44 strB = document.getElementById("str-b");
45 buttons = document.getElementsByTagName("button"); //按钮数组
46 p = document.getElementById("result");
47 //定义数字检查
48 function isNumber(num) {
49 if (!isNaN(num.value) && num.value != "") {
50 return true;
51 } else {
52 return false;
53 }
54 }
55 //定义勾选检查
56 function isCheck(check) {
57 if (check.checked) {
58 return true;
59 } else {
60 return false;
61 }
62 }
63 //按钮1监听点击，实现获取当前选中输入的内容长度
64 buttons[0].addEventListener("click", function () {
65 if (isCheck(radioA)) {
66 p.innerHTML = "当前输入内容长度为：" + strA.value.length;
67 }
68 if (isCheck(radioB)) {
69 p.innerHTML = "当前输入内容长度为：" + strB.value.length;
70 }
71 })
72 //按钮2监听点击，实现获取当前选中输入中的第3个字符
73 buttons[1].addEventListener("click", function () {
74 if (isCheck(radioA)) {
75 p.innerHTML = "当前选中的第三个字符为：" + strA.value.charAt(2);
76 }
77 if (isCheck(radioB)) {
78 p.innerHTML = "当前选中的第三个字符为：" + strB.value.charAt(2);
79 }
80 })
81 //按钮3监听点击，实现把两个输入框的文字连接在一起输出（concat）
82 buttons[2].addEventListener("click", function () {
83 p.innerHTML = "两个输入框的文字连接在一起输出为：" + strA.value.concat(strB.value);
84 })
85 //按钮4监听点击，实现输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）
86 buttons[3].addEventListener("click", function () {
87 p.innerHTML = "B在A中第一次出现的位置为：" + strA.value.indexOf(strB.value);
88 })
89 //按钮5监听点击，实现输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）
90 buttons[4].addEventListener("click", function () {
91 p.innerHTML = "A在B中第一次出现的位置为：" + strB.value.lastIndexOf(strA.value);
92 })
93 //按钮6监听点击，实现使用slice获取选中输入框内容的部分内容，参数为num-a及num-b
94 buttons[5].addEventListener("click", function () {
95 if (isCheck(radioA)) {
96 p.innerHTML = "选中字符串被截取的部分为：" + strA.value.slice(numA.value, numB.value);
97 }
98 if (isCheck(radioB)) {
99 p.innerHTML = "选中字符串被截取的部分为：" + strB.value.slice(numA.value, numB.value);
100 }
101 })
102 //按钮7监听点击，实现当前选中输入框的行数
103 buttons[6].addEventListener("click", function () {
104 if (isCheck(radioA)) {
105 p.innerHTML = "当前选中输入框的行数为：" + strA.value.split(/\r?\n|\r/).length; //window是\r\n(回车换行),mac是\r（回车）
106 }
107 if (isCheck(radioB)) {
108 p.innerHTML = "当前选中输入框的行数为：" + strB.value.split(/\r?\n|\r/).length; //？匹配0或1次
109 }
110 })
111 //按钮8监听点击，实现使用substr获取选中输入框内容的子字符串，参数为num-a（起始位置）及num-b（长度）
112 buttons[7].addEventListener("click", function () {
113 if (isCheck(radioA)) {
114 p.innerHTML = "选中字符串被截取的部分为：" + strA.value.substr(numA.value, numB.value);
115 }
116 if (isCheck(radioB)) {
117 p.innerHTML = "选中字符串被截取的部分为：" + strB.value.substr(numA.value, numB.value);
118 }
119 })
120 //按钮9监听点击，实现把所选输入框中的内容全部转为大写
121 buttons[8].addEventListener("click", function () {
122 if (isCheck(radioA)) {
123 p.innerHTML = "选中字符串转大写为：" + strA.value.toUpperCase()
124 }
125 if (isCheck(radioB)) {
126 p.innerHTML = "选中字符串转大写为：" + strB.value.toUpperCase()
127 }
128 })
129 //按钮10监听点击，实现把所选输入框中的内容全部转为小写
130 buttons[9].addEventListener("click", function () {
131 if (isCheck(radioA)) {
132 p.innerHTML = "选中字符串转小写为：" + strA.value.toLowerCase()
133 }
134 if (isCheck(radioB)) {
135 p.innerHTML = "选中字符串转小写为：" + strB.value.toLowerCase()
136 }
137
138 })
139 //按钮11监听点击，实现把所选输入框中内容的半角空格全部去除
140 buttons[10].addEventListener("click", function () {
141 if (isCheck(radioA)) {
142 p.innerHTML = "选中半角空格全部去除为：" + strA.value.replace(/\s+/g, "");
143 //全局匹配一次或多次S（匹配任何空白字符，包括空格、制表符、换页符等等。）
144 }
145 if (isCheck(radioB)) {
146 p.innerHTML = "选中半角空格全部去除为：" + strB.value.replace(/\s+/g, "");
147 }
148 })
149 //按钮12监听点击，实现把所选输入框中内容的a全部替换成另外一个输入框中的内容
150 buttons[11].addEventListener("click", function () {
151 if (isCheck(radioA)) {
152 p.innerHTML = "选中半角空格全部去除为：" + strA.value.replace(strA.value, strB.value);
153 //全局匹配一次或多次S（匹配任何空白字符，包括空格、制表符、换页符等等。）
154 }
155 if (isCheck(radioB)) {
156 p.innerHTML = "选中半角空格全部去除为：" + strB.value.replace(strB.value, strA.value);
157 }
158 })
159 </script>
160 </body>
161
162 </html>
原文地址：https://www.cnblogs.com/Joe-and-Joan/p/10072320.html
时间： 2024-11-08 03:57:35