Ändern der Farbe von Wörtern im Satz, die mit den Wörtern in einem Array übereinstimmen

Question

Versuchen Sie herauszufinden, wie Sie das programmieren - hoffentlich kann jemand helfen!

Ich mache ein einfaches Projekt, mit dem der Benutzer die Farbe bestimmter Wörter ändern kann, indem er auf eine Schaltfläche klickt.

Zum Beispiel ist dies der Satz:

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

und die Worte, die ich will, Farbe ändern sind „mary“, „töten“, „bella“

Ich weiß, ich brauche einen Array haben von den Wörtern, die ich ändern möchte, aber ich bin nicht sicher, wie man den Satz dem Array zuordnet/verbindet.

Ich habe bereits eine Taste programmiert, die die Farbe des ganzen Satzes ändert * aber kann nicht herausfinden, wie man die Array-Elemente verbindet - weiß jemand wie? Vielen Dank!

* Code

<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: prüft die Kommentare euch links - sorry für wichtige Informationen auszulassen! Danke auch für das Feedback!

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>

Erstens stellen die Worte, von denen Sie Farbe in einem Array ändern möchten. Wählen Sie dann das Element <p> mit document.querySelector(). Weisen Sie den aktuellen HTML-Inhalt dieses Elements einer Variablen zu, und ersetzen Sie für jedes Wort im Array diese Welt durch eine <span> mit einer Klasse color, die dieses Wort enthält. Weisen Sie dann das geänderte HTML der innerHTML-Eigenschaft des Elements <p> zu.

Sie müssen auch die gewünschte Farbe in CSS einstellen.

Answer 2

Wenn Sie nur ein „einfaches Projekt, das dem Benutzer erlaubt, die Farbe von bestimmten Wörtern zu ändern, indem Sie auf eine Schaltfläche“ machen, dann können Sie es tun, indem nur ein <span> Tag zu jedem der Wörter hinzufügen und ändern Sie in Javascript, indem Sie jede ID wie unten anvisieren. Du sagst "Ich weiß, dass ich ein Array haben muss", aber ich kann nicht sagen, ob du meinst, dass du denkst, dass du das nur mit einem Array machen kannst oder wenn du das mit einem Array machen willst. Für mich klingt es nach ersterem, so unten ist ohne die Verwendung eines Arrays und span Tags. Wenn Sie dies mit einem Array tun müssen, können Sie dies auf sehr ähnliche Weise tun, aber es ist nicht wirklich notwendig, wenn Sie 3 separate Tasten haben möchten.

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>

Answer 3

könnten Sie legen sich lediglich span Tags um die Worte und geben ihm eine id=mary, id=kill usw.

Wenn Sie alle diese Worte wollen die gleiche Farbe zu ändern, nur geben Sie jedem span den gleichen Klassennamen.

Können Sie den Code einfügen, den Sie bisher geschrieben haben?

Answer 4

Ich erklärte es in den Code-Kommentare unten.

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(); 

ansehen Live:

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