JavaScript里面的居民们2-字符串
基于HTML，实现需求
- 按照HTML中按钮的描述以此实现功能
- 计算结果显示在 id 为 result 的 P 标签中
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>JS里的居民们2</title> </head> <body>
<div>
<label>String A:
<input id="radio-a" type="radio" checked="true" name="str-obj" value="a">
</label>
<textarea id="str-a"></textarea>
<label>String B:
<input id="radio-b" type="radio" name="str-obj" value="b">
</label>
<textarea id="str-b"></textarea>
<label>Num A：<input id="num-a" type="number" value="0"></label>
<label>Num B：<input id="num-b" type="number" value="1"></label>
</div>
<div>
<button>获取当前选中输入的内容长度</button>
<button>当前选中输入中的第3个字符</button>
<button>把两个输入框的文字连接在一起输出（concat）</button>
<button>输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）</button>
<button>输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）</button>
<button>使用slice获取选中输入框内容的部分内容，参数为num-a及num-b</button>
<button>当前选中输入框的行数</button>
<button>使用substr获取选中输入框内容的子字符串，参数为num-a及num-b</button>
<button>把所选输入框中的内容全部转为大写</button>
<button>把所选输入框中的内容全部转为小写</button>
<button>把所选输入框中内容的半角空格全部去除</button>
<button>把所选输入框中内容的a全部替换成另外一个输入框中的内容</button>
</div>
<p id="result"></p>
<script>
const numA = document.getElementById("num-a");
numB = document.getElementById("num-b");
radioA = document.getElementById("radio-a");
radioB = document.getElementById("radio-b");
strA = document.getElementById("str-a");
strB = document.getElementById("str-b");
buttons = document.getElementsByTagName("button"); //按钮数组
p = document.getElementById("result");
//定义数字检查
function isNumber(num) {
if (!isNaN(num.value) && num.value != "") {
return true;
} else {
return false;
}
}
//定义勾选检查
function isCheck(check) {
if (check.checked) {
return true;
} else {
return false;
}
}
//按钮1监听点击，实现获取当前选中输入的内容长度
buttons[0].addEventListener("click", function () {
if (isCheck(radioA)) {
p.innerHTML = "当前输入内容长度为：" + strA.value.length;
}
if (isCheck(radioB)) {
p.innerHTML = "当前输入内容长度为：" + strB.value.length;
}
})
//按钮2监听点击，实现获取当前选中输入中的第3个字符
buttons[1].addEventListener("click", function () {
if (isCheck(radioA)) {
p.innerHTML = "当前选中的第三个字符为：" + strA.value.charAt(2);
}
if (isCheck(radioB)) {
p.innerHTML = "当前选中的第三个字符为：" + strB.value.charAt(2);
}
})
//按钮3监听点击，实现把两个输入框的文字连接在一起输出（concat）
buttons[2].addEventListener("click", function () {
p.innerHTML = "两个输入框的文字连接在一起输出为：" + strA.value.concat(strB.value);
})
//按钮4监听点击，实现输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）
buttons[3].addEventListener("click", function () {
p.innerHTML = "B在A中第一次出现的位置为：" + strA.value.indexOf(strB.value);
})
//按钮5监听点击，实现输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）
buttons[4].addEventListener("click", function () {
p.innerHTML = "A在B中第一次出现的位置为：" + strB.value.lastIndexOf(strA.value);
})
//按钮6监听点击，实现使用slice获取选中输入框内容的部分内容，参数为num-a及num-b
buttons[5].addEventListener("click", function () {
if (isCheck(radioA)) {
p.innerHTML = "选中字符串被截取的部分为：" + strA.value.slice(numA.value, numB.value);
}
if (isCheck(radioB)) {
p.innerHTML = "选中字符串被截取的部分为：" + strB.value.slice(numA.value, numB.value);
}
})
//按钮7监听点击，实现当前选中输入框的行数
buttons[6].addEventListener("click", function () {
if (isCheck(radioA)) {
p.innerHTML = "当前选中输入框的行数为：" + strA.value.split(/\r?\n|\r/).length; //window是\r\n(回车换行),mac是\r（回车）
}
if (isCheck(radioB)) {
p.innerHTML = "当前选中输入框的行数为：" + strB.value.split(/\r?\n|\r/).length; //？匹配0或1次
}
})
//按钮8监听点击，实现使用substr获取选中输入框内容的子字符串，参数为num-a（起始位置）及num-b（长度）
buttons[7].addEventListener("click", function () {
if (isCheck(radioA)) {
p.innerHTML = "选中字符串被截取的部分为：" + strA.value.substr(numA.value, numB.value);
}
if (isCheck(radioB)) {
p.innerHTML = "选中字符串被截取的部分为：" + strB.value.substr(numA.value, numB.value);
}
})
//按钮9监听点击，实现把所选输入框中的内容全部转为大写
buttons[8].addEventListener("click", function () {
if (isCheck(radioA)) {
p.innerHTML = "选中字符串转大写为：" + strA.value.toUpperCase()
}
if (isCheck(radioB)) {
p.innerHTML = "选中字符串转大写为：" + strB.value.toUpperCase()
}
})
//按钮10监听点击，实现把所选输入框中的内容全部转为小写
buttons[9].addEventListener("click", function () {
if (isCheck(radioA)) {
p.innerHTML = "选中字符串转小写为：" + strA.value.toLowerCase()
}
if (isCheck(radioB)) {
p.innerHTML = "选中字符串转小写为：" + strB.value.toLowerCase()
} })
//按钮11监听点击，实现把所选输入框中内容的半角空格全部去除
buttons[10].addEventListener("click", function () {
if (isCheck(radioA)) {
p.innerHTML = "选中半角空格全部去除为：" + strA.value.replace(/\s+/g, "");
//全局匹配一次或多次S（匹配任何空白字符，包括空格、制表符、换页符等等。）
}
if (isCheck(radioB)) {
p.innerHTML = "选中半角空格全部去除为：" + strB.value.replace(/\s+/g, "");
}
})
//按钮12监听点击，实现把所选输入框中内容的a全部替换成另外一个输入框中的内容
buttons[11].addEventListener("click", function () {
if (isCheck(radioA)) {
p.innerHTML = "选中半角空格全部去除为：" + strA.value.replace(strA.value, strB.value);
//全局匹配一次或多次S（匹配任何空白字符，包括空格、制表符、换页符等等。）
}
if (isCheck(radioB)) {
p.innerHTML = "选中半角空格全部去除为：" + strB.value.replace(strB.value, strA.value);
}
})
</script>
</body> </html>
JavaScript里面的居民们2-字符串的更多相关文章
- JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString
JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString 如下示例: 直接写的a1就是一个Json对象,a2 就是一个Json对象字符串; 通 ...
- JavaScript和php常用语法——切割字符串
在面向Web的应用中,前台和后台通信非常常用的一种格式就是字符串,所以,在通信中,我们不可避免的就需要进行字符串的拼切. 在js代码中,当我们传递一个字符串到后台代码时,我们在后台需要对字符串进行切割 ...
- 每天一个JavaScript实例-递归实现反转数组字符串
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaScript中有三个可以对字符串编码的函数，分别是： escape(),encodeURI(),encodeURIComponent()
JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...
- JavaScript eval() 函数，计算某个字符串，并执行其中的的 JavaScript 代码。
JavaScript eval() 函数,计算某个字符串,并执行其中的的 JavaScript 代码. 适合用于计算器的计算,等. 例子: eval("x=10;y=20;document. ...
- JavaScript学习笔记（二）——字符串
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
- 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
- JavaScript基础知识（正则表达式、字符串）
23.正则表达式 作用:定义一个特定的验证字符串内容规则的表达式 注:正则表达式并不是JavaScript独有的:JavaScript支持正则表达式 var a = { }; // 定义一个空对象 ...
- JavaScript八张思维导图—字符串用法
JS基本概念 JS操作符 JS基本语句 JS数组用法 Date用法 JS字符串用法 JS编程风格 JS编程实践 不知不觉做前端已经五年多了,无论是从最初的jQuery还是现在火热的Angular,Vu ...
- 每日分享！～ vue JavaScript中为什么可以读取到字符串的长度！（包装对象）
首先需要知道什么是包装对象? 对象是JavaScript语言下最主要的数据类型,三种原始的值-----数值,字符串,布尔值,在一定条件下会自动的转为对象.也就是原始类型的包装对象: 也就是通过如下方式 ...
随机推荐
- 10分钟教你用Python实现微信自动回复
01 前言&&效果展示 相信大家都有忙碌的时候,不可能一直守在微信上及时回复消息.但微信又不能像QQ一样设置自动回复.无妨,今天,我们就来用Python实现微信的自动回复功能吧,并且把 ...
- POJ2279 Mr Young's Picture Permutations
POJ2279 Mr Young's Picture Permutations 描述: 有N个学生合影,站成左对齐的k排,每行分别有N1,N2…NK个人,第一排站最后,第k排站之前.学生身高依次是1… ...
- Jquery sblings
$("给定元素").siblings(".selected") 中的(".selected")表示筛选给定元素类名为.selected的同胞 ...
- python 控制台输出带颜色的文字的方法
python_控制台输出带颜色的文字方法 在python开发的过程中,经常会遇到需要打印各种信息.海量的信息堆砌在控制台中,就会导致信息都混在一起,降低了重要信息的可读性.这时候,如果能给重要的信 ...
- TCP/IP——何时用UDP代替TCP
UDP和TCP UDP和TCP都有其自身的特点,不同的应用场景和要求需要使用不同的协议来传输,那么何时我们可以用UDP代替TCP呢. UDP 的优点 UDP支持广播和多播,事实上如果应用程序使用广播或 ...
- Luogu P1886 滑动窗口
P1886 滑动窗口 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The a ...
- vue-cli 启动过项目步骤
一. 安装 node.js 安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功. 二.安装webpack npm install webpack - ...
- sublime 运行 python
sublime 中 选择菜单 Tools--> Build System-->New Build System,编辑文件如下: /usr/local/Cellar/python/3.7.0 ...
- pycharm入门的简易使用教程
1.安装python3.5包: 本人安装到C盘,如下所示: Ps:安装时候,路径一定要添加到环境变量中,安装完,需要更新环境变量,所以要重启电脑 2.安装pycharm 下载相应的安装包,步骤不重复了 ...
- LinuxShell脚本编程基础1-vi编辑器的使用
1.输入模式与命令模式的切换 按 [Esc]键 切换到 命令模式: 2.保存与退出 :w mytest.txt 保存文件名 :q 退出 :q! 强制退出 :wq 保存并退出 3.插入文本命令 i 在 ...