JSの2つのdivで同じ単語をマークするボタンを作成するにはどうすればよいですか？ボタンの実行

Question

イラスト：

Answer 1

これはあなたのために働くでしょう！、スタックオーバーフローへようこそ -

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>

注：DoがHow to Askを読みます質問をするためのヒントこれは初めてのことですので、この質問に答えるのは、疑問がある場合はコメントに私に聞いてください。これがあなたに役立つことを願っています。

Answer 2

JSでHTMLタグにマークタグを追加できます。ただし、マークタグはHTML5でのみ動作します。それは新しいブラウザで大丈夫です。このForexample

は、あなたのhtmlコードです：これは、CSSコード

<div> 
    Word1 Word2 Word3 Word1 
</div> 

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

です：

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>'); 
    });