JS中常见的replace

---

在学习JS时遇到了replace，很容易混淆，于是总结下来供大家参考，它们分别在字符串，classList，节点中出现过

1.字符串中的replace

语法:string.replace(“被替换的字符串old” , “替换的字符串new”)，代码如下（示例）：

<script>
	var a = "123我没K";
	var b = a.replace("我没K", "布鲁biu");
	console.log(a, b);
</script>

2.classList中replace

语法:节点.classList.replace(“被替换的类名old” , “替换的类名new”)，代码如下（示例）：

<div class="box1 box2 box3"></div>
<script>
    var box = document.querySelector(".box1");
    console.log(box.classList);//'box1', 'box2', 'box3'
    box.classList.replace("box2", "2box");
    console.log(box.classList);//'box1', '2box', 'box3'
</script>

3.DOM操作节点中的替换

语法:父节点.replaceChild(替换的子节点new , 被替换的子节点old)，代码如下（示例）：

<div class="box1 box2 box3">
    <span>special text</span>
</div>
<script>
    var box = document.querySelector(".box1");
    var span = document.querySelector("span");
    var strong = document.createElement("strong");
    strong.innerHTML = "我是替换的strong标签";
    console.log(box.innerHTML);//<span>special text</span>
    box.replaceChild(strong, span);
    console.log(box.innerHTML);//<strong>我是上场的strong标签</strong>
</script>

---

注意

第三个DOM操作节点中的替换语法中后面括号中是new在前，old在后。
这个地方与前两个语法有所不同。