如何在JS中创建一个在两个div中标记相同单词的按钮？

Question

按钮执行的说明：

Answer 1

欢迎使用Stack Overflow！，这对您有用 -

function myFunction() {
  var div = document.getElementsByTagName("span");
  div[0].innerHTML += 'Hello';
  div[1].innerHTML += 'Hello';
}

div {
  display: inline-block;
  width: 48%;
  float: left;
  border: 1px solid;
  text-align: center;
  height:50px;
}
button {
  border: 1px solid;
  text-align: center;
  margin-top: 30px;
}

<div>
  <span></span> world
</div>
<div>
  <span></span>
</div>

<button class="button" onclick="myFunction()">Button </button>

注意：请阅读How to Ask以获取有关提问的提示。这是您第一次这样，为什么在回答此问题时如果有任何疑问请在评论中询问我。希望这对你有所帮助。

Answer 2

您可以使用JS在Html代码中添加mark标记。但标记标记仅适用于HTML5。在新的浏览器中它会没问题。

例如，这是您的HTML代码：

<div>
    Word1 Word2 Word3 Word1
</div>

<div>
    Word1
</div>
<input type="button" id="button" value="Click" onclick="" />

这是css代码：

div { width:200px;height:200px;border:1px solid black;float:left; }

这是我们的javascript代码：

var commonWord = 'Word1';
var button = document.getElementById('button');

button.addEventListener('click', function () {

    var divs = document.getElementsByTagName('div');
    divs[0].innerHTML = divs[0].innerHTML.replace(commonWord, '<mark>' + commonWord + '</mark>');
    divs[1].innerHTML = divs[1].innerHTML.replace(commonWord, '<mark>' + commonWord + '</mark>');
});

但是这个javascript代码只标记了div中的第一个单词 如果要标记所有单词，可以使用：

    var commonWord = 'Word1';
    var button = document.getElementById('button');

    button.addEventListener('click', function () {

        var divs = document.getElementsByTagName('div');
        divs[0].innerHTML = divs[0].innerHTML.replace(/Word1/g, '<mark>' + commonWord + '</mark>');
        divs[1].innerHTML = divs[1].innerHTML.replace(/Word1/g, '<mark>' + commonWord + '</mark>');
    });