文中の単語の色を配列内の単語に合わせて変更する

Question

これをコード化する方法を理解しようとしています。

私はボタンをクリックして特定の単語の色を変更できるようにする簡単なプロジェクトを作っています。

たとえば、これは文である：

<p>i cant believe mary tried to kill her own sister, bella ! </p> 

と私は配列を持っている必要があります知っている私は、色を変更したい単語は「メアリー」、「殺す」、「ベラ」

です変更したい単語のうち、どのように文を配列に代入/連結するかわかりません。

私はすでに文全体の色を変更するボタンをコード化していますが、配列要素をどのように接続するのかわかりません - どのように知っていますか？ありがとう！

*コード

<p>i cant believe mary tried to kill her own sister, bella !</p> 
<br/> 

<input id="changeColor" type="button" value="Change Color" /> 

//JQUERY CHANGES TEXT TO BLUE WHEN BUTTON IS CLICKED 
$(function() { 
    $('#changeColor').click(function() { 
     $("p").css({"color":"blue"}); 
    }); 
}); 

EDIT：君たちが残っコメントを検討 - 重要な情報を除外して申し訳ありません！フィードバックいただきありがとうございます！

Answer 1

const words = ['mary', 'kill', 'bella'] 
 

 
const p = document.querySelector('p') 
 
var newHTML = p.innerHTML 
 
words.forEach(word=> 
 
    newHTML = newHTML.replace(word, `<span class="color">${word}</span>`) 
 
) 
 
p.innerHTML = newHTML

.color { 
 
    color: red; 
 
}

<p>i cant believe mary tried to kill her own sister, bella ! </p>

まず、あなたは配列内の色を変更したいの単語を置きます。次にdocument.querySelector()を使用して<p>要素を選択します。その要素の現在のHTMLコンテンツを変数に割り当て、配列内の各単語について、その単語を含むcolorクラスの<span>で置き換えます。次に、変更されたHTMLを<p>要素のinnerHTMLプロパティに割り当てます。

また、CSSで色を設定する必要があります。

Answer 2

あなただけの、あなただけの言葉と変化のそれぞれに<span>のタグを追加することによってそれを行うことができ、「ユーザーがボタンをクリックすることにより、特定の単語の色を変更することができるシンプルなプロジェクト」を作っている場合彼らは以下のようにそれぞれのIDをターゲットにしてjavascriptでそれら。あなたは「配列を持つ必要があることは知っていますが」と言っていますが、配列でこれを行うことしかできないとか、配列でこれをやりたいと思うようなことを言うことはできません。私には前者のように聞こえるので、以下では配列タグとスパンタグを使用しない。配列でこれを行う必要がある場合は、非常によく似た方法で行うことができますが、3つの別々のボタンが必要な場合は本当に必要ありません。

Answer 3

function changeRed() { 
 
document.getElementById('red').style.color = 'red'; 
 
    } 
 

 
function changeBlue() { 
 
document.getElementById('blue').style.color = 'blue'; 
 
    } 
 

 
function changeGreen() { 
 
document.getElementById('green').style.color = 'green'; 
 
    } 
 

<p>i cant believe <span id="red">mary</span> tried to <span id="blue">kill</span> her own sister, <span id="green">bella</span> ! </p> 
 

 
<button type="button" onclick="changeRed()">mary</button> 
 
<button type="button" onclick="changeBlue()">kill</button> 
 
<button type="button" onclick="changeGreen()">bella</button>

あなたは言葉だけ周り spanタグを入れて、それを id=maryを与えることができる、 id=killなど

あなたが同じ色に変更するためにそれらの単語のすべてをしたい場合は、単にそれぞれspanに同じクラス名を付けます。

これまでに作成したコードを含めることはできますか？

Answer 4

私は以下のコードコメントで説明しました。

HTML：

<div id="sentenceContainer">Placeholder</div> 
<button id="changeButton">Change</button> 
<button id="resetButton">Reset</button> 

CSS：

#sentenceContainer { 
    position: relative; 
    color: white; 
    background-color: black; 
    height: 40px; 
    line-height: 40px; 
} 

#sentenceContainer > span:not(:first-child) { 
    padding-left: 5px; 
} 

.red { 
    color: red; 
} 

はJavaScript：

// We make an array of the words 
var words = ["i", "cant", "believe", "mary", "tried", "to", "kill", "her", "own", "sister,", "bella", "!"]; 

// These are the indices from the array above that correspond to the words you want to turn red 
var redIndices = [3, 6, 10]; 

$('#changeButton,#resetButton').on('click', writeWords); 

// This is the function that will write the sentence for us 
function writeWords(evt) { 

    // Get the ID of the target to know if we are changing or resetting 
    var red = evt && evt.target && $(evt.target).attr('id') === 'changeButton' ? true : false; 

    // This grabs our sentenceContainer 
    // Always grab these outside of any loops to speed up code execution 
    // Otherwise there would be a DOM traversal for each iteration of the loop 
    var sentenceContainer = $('#sentenceContainer'); 

    // Empty it so it doesn't repeat the sentence 
    sentenceContainer.empty(); 

    // Iterate the words array 
    for (var i = 0; i < words.length; i++) { 

    // Generate the container 
    var wordSpan = $('<span></span>'); 

    // Add the word to it 
    wordSpan.text(words[i]); 

    // If this is a word we want red, from redIndices - we add the class red 
    if (red && redIndices.indexOf(i) >= 0) 
     wordSpan.addClass('red'); 

    // Append the word container to the sentence container 
    sentenceContainer.append(wordSpan); 
    } 

}; 

writeWords(); 

見るこのライブ：

http://codepen.io/noahtkeller/pen/QEOOyL