[英]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.