JS里的居民们2-字符串

Posted JoeJoan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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(/
?
|
/).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>

 

以上是关于JS里的居民们2-字符串的主要内容,如果未能解决你的问题,请参考以下文章

JS里的居民们7-数组排序

JS里的居民们8-对象和数组转换

JavaScript里面的居民们3-去除空格和重复

JavaScript笔试题(js高级代码片段)

北极冻土里的代码,是 GitHub 的终极浪漫

web代码片段