基于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(/ ? | /).length; //window是 (回车换行),mac是 （回车） 106 } 107 if (isCheck(radioB)) { 108 p.innerHTML = "当前选中输入框的行数为：" + strB.value.split(/ ? | /).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>