Question

点击按钮替换＆＃34;蓝色＆＃34;与＆＃34;红色＆＃34;在以下段落中：

<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>

我试图替换字符串＆＃34; blue＆＃34;使用DOM方法在文档中使用红色。我没有得到理想的结果。任何人都可以看看代码。任何帮助将不胜感激

Answer 1

您的代码中存在多个问题。

要从div中获取p，您需要

str.getElementsByTagName("p");  //and not str.document...

上述语句将返回一个集合而不是单个元素。因此，您需要遍历集合并进行替换。

for(var i=0; i<x.length; i++) {
    var res = x[i].innerHTML.replace(/blue/gi, "red");
    x[i].innerHTML = res;
}

Working example

根据您的评论更新^{^{（什么是循环）}}：请使用教程here开始。

Answer 2

另一种方法是完全忽略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/

Answer 3

这应该适合你： -

var paras = document.getElementsByTagName('p');
    for (var i = 0; i < paras.length; i++) {
        paras[i].textContent = paras[i].textContent.replace(/blue/g,'red');
    };

Answer 4

一些事情......

你不能在str上调用.document，它已经是一个对象。
您需要遍历p元素数组，这些元素几乎正确地抓取。：）

这样的事情：

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/

希望有所帮助！

Answer 5

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

如何使用javascript在HTML DOM元素中查找和替换字符串

5 个答案: