欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS操作字符串

程序员文章站 2022-04-30 22:26:50
...

参考如下代码:

<body>
	<div id="div1">what's your name?</div>
	<div id="div2">My name is rose.</div>
	<button id="btn1">concat()</button><input type="text"><br>
	<button id="btn2">slice(3)</button><input type="text"><br>
	<button id="btn3">slice(3,6)</button><input type="text"><br>
	<button id="btn4">slice(-1)</button><input type="text"><br>
	<button id="btn5">substr(3)</button><input type="text"><br>
	<button id="btn6">substr(3,6)</button><input type="text"><br>
	<button id="btn7">substr(-1)兼容</button><input type="text"><br>

	<!-- input框和button按钮之间不能有换行和空格,因为next sibling会把空格或者换行当成自己的兄弟 -->
	
</body>
</html>
<script>
	//获取两个div的内容
	var div1 = document.getElementById("div1").innerHTML;
	var div2 = document.getElementById("div2").innerHTML; 
	//封装button的操作
	function onbtnclick(id,txt) {
		document.getElementById(id).onclick = function() {
			this.nextSibling.value = txt;//把txt给input
		}
	}
	onbtnclick("btn1",div1.concat(div2));//连接div1和div2字符串,结果为:what's your name?My name is rose.
	onbtnclick("btn2",div1.slice(3));//起始位置为索引号为3 的位置,省略了结束位置,默认截取到最后.
	// 结果为:t's your name?
	onbtnclick("btn3",div1.slice(3,6));
	// 从索引号为3的位置开始截取,索引号为6 的不包括,即从第四个位置到第六个位置,结果为:t's
	onbtnclick("btn4",div1.slice(-1));//若是负数。则从右边开始数,结果是?。
	onbtnclick("btn5",div1.substr(3));// 结果和slice(3)一样。
	onbtnclick("btn6",div1.substr(3,6));//从索引号为3的位置开始截取,截取6个。
	onbtnclick("btn7",div1.substr(div1.length-1,1));// 兼容性写法
</script>

上述代码的执行结果:

JS操作字符串