[英]How to find and replace a string in HTML DOM element using javascript
在下面的段落中,单击按钮以将“蓝色”替换为“红色”:
<div id="main">
<p>Mr Blue has a blue house and a blue car.</p>
<p>Mr Blue has a blue house and a blue car.</p>
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var str = document.getElementById("main");
var x = str.document.getElementsByTagName("p");
var res = x.innerHTML.replace(/blue/gi, "red");
document.getElementsByTagName("p").innerHTML = res;
}
</script>
</body>
</html>
我试图使用DOM方法用红色替换字符串“ blue”的出现。 我没有得到想要的结果。 任何人都可以看一下代码。 任何帮助,将不胜感激
另一种方法是完全忽略p
标签,而只对div的innerHTML进行替换,如下所示:
function myFunction() {
var str = document.getElementById("main");
var inner = str.innerHTML;
var res = inner.replace(/blue/gi, "red");
str.innerHTML = res;
}
这也是一个完整的示例: http : //jsfiddle.net/ek9b4/
这应该为您工作:
var paras = document.getElementsByTagName('p');
for (var i = 0; i < paras.length; i++) {
paras[i].textContent = paras[i].textContent.replace(/blue/g,'red');
};
几件事...
像这样:
function myFunction() {
var str = document.getElementById("main");
var x = str.getElementsByTagName("p");
for (i = 0; i < x.length; i++) {
var text = x[i].innerHTML;
x[i].innerHTML = text.replace(/blue/gi, "red");
}
}
您可以在此处看到一个有效的示例: http : //jsfiddle.net/a942G/
希望有帮助!
getElementsByTagName
返回一个NodeList; 您需要循环,例如使用for
循环。 但是,这是处理字母大小写的另一种更可重用的方法:
// helper to convert NodeList to real array
var toArray = Array.call.bind([].slice)
// helper to query the DOM
var query = document.querySelectorAll.bind(document)
// uppercase first letter
var capitalize = function(x) {
return x[0].toUpperCase() + x.slice(1)
}
// replace word and handle letter case
var replaceWord = function(word, replacement, str) {
return str.replace(RegExp(word, 'gi'), function(m) {
return /[A-Z]/.test(m) ? capitalize(replacement) : replacement
})
}
// query all `p` tags and replace
toArray(query('p')).forEach(function(x) {
x.textContent = replaceWord('blue', 'red', x.textContent)
})
演示: http : //jsbin.com/siveh/2/edit
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.