基于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>JS里的居民们2-字符串
原文地址：https://www.cnblogs.com/Joe-and-Joan/p/10072320.html