JS里的居民们2-字符串

基于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>

 

相关文章