Utilisation de tableaux pour modifier la couleur de certains mots dans une boîte de saisie

Je travaille donc sur un JSFiddle et je suis un peu confus à propos de quelque chose. J'ai une boîte de saisie appelée myTextField avec un paragraphe aléatoire et un bouton qui appelle ma fonction de changement. Lorsque vous cliquez sur le bouton, le texte affiché dans la boîte sera affiché ci-dessous, mais je souhaite qu'il change les couleurs des mots que Apparaissent dans mon tableau pour dire la couleur bleue. Toute aide serait appréciée, je suis très nouveau pour HTML / CSS / JS si désolé si une partie de ma terminologie est incorrecte

MyHTML

<input type="text" id="myTextField" value ="his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters."/> <input type="submit" id="byBtn" value="Change" onclick="change()"/> <p id="title"></p>

Javascript

 change = function(){ var matches = ["every", "most", "that", "half", "much", "the", "another", "her", "my", "their", "a", "an", "his", "neither", "these", "all", "its", "no", "this", "any", "those", "both", "least", "our", "what", "each", "less", "several", "which", "either", "many", "some", "whose", "enough", "more", "such", "your"]; //if a value from array matches a value from myTextField if (matches===document.getElementById('myTextField')) { //change color of said words } var myNewTitle = document.getElementById('myTextField').value; var title = document.getElementById('title'); title.innerHTML = myNewTitle; }

Https://jsfiddle.net/hnfe3Lgk/

Je pense que vous voulez quelque chose comme ça:

 change = function() { var matches = ["every", "most", "that", "half", "much", "the", "another", "her", "my", "their", "a", "an", "his", "neither", "these", "all", "its", "no", "this", "any", "those", "both", "least", "our", "what", "each", "less", "several", "which", "either", "many", "some", "whose", "enough", "more", "such", "your" ]; // get the current value of the "myTextField" element var myTextFieldValue = document.getElementById('myTextField').value; // split this string at every space character - we now have // an array of individual words var myTextFieldWords = myTextFieldValue.split(' '); // for each of these words, test if the "matches" array contains // the word. If it does, surround it with a <span class="match"> tag. var formattedWords = myTextFieldWords.map(function(word) { if (matches.indexOf(word) !== -1) { return '<span class="match">' + word + '</span>'; } else { return word; } }); // formattedWords now looks like this: // ['<span>his</span>', 'first' 'entering', 'a' .... ] // join all the items in the formattedWords array (with a // space between each word) into a single string, and set // it as the innerHTML of the #title element document.getElementById('title').innerHTML = formattedWords.join(' '); }

 .match { color: blue; }

 <input type="text" id="myTextField" value="his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters." /> <input type="submit" id="byBtn" value="Change" onclick="change()" /> <p id="title"></p>

C'est juste une supposition, mais pourquoi ne pas essayer cela

Cela suppose, vous voulez changer les mots, sur le flou

 var input = document.getElementById("my-input"); var par = document.getElementById("par"); var matches = ["every", "most", "that", "half", "much", "the", "another", "her", "my", "their", "a", "an", "his", "neither", "these", "all", "its", "no", "this", "any", "those", "both", "least", "our", "what", "each", "less", "several", "which", "either", "many", "some", "whose", "enough", "more", "such", "your"]; input.addEventListener("blur", function() { var inputValue = input.value; par.innerHTML = ""; inputValue.split(' ').forEach(function(word) { if (matches.indexOf(word) > -1) { par.innerHTML += "<span class='colored'>" + word + " " + "</span>"; } else { par.innerHTML += word + " "; } }); });

 .colored { color: blue; }

 <textarea id="my-input"></textarea> <p id="par"></p>

 my_change = function(){ var myNewTitle = document.getElementById('myTextField').value; if( myNewTitle.length==0 ){ alert('Write Some real Text please.'); return; } var title = document.getElementById('title'); var matches = ["every", "most", "that", "half", "much", "the", "another", "her", "my", "their", "a", "an", "his", "neither", "these", "all", "its", "no", "this", "any", "those", "both", "least", "our", "what", "each", "less", "several", "which", "either", "many", "some", "whose", "enough", "more", "such", "your"]; var r = new RegExp('(^|\\W)('+matches.join('|')+')(?=\\W|$)', 'g'); title.innerHTML = myNewTitle.replace(r, '$1<span>$2</span>'); }; my_remove = function(){ document.getElementById('title').innerHTML = ""; }

 span { color: blue; }

 <input type="text" id="myTextField" value ="It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters."/> <input type="submit" id="byBtn" value="Change" onclick="my_change()"/> <input type="button" id="refresh" value="Reset" onclick="my_remove()"/> <p id="title"></p>

Donc, ce que vous pouvez faire, c'est de rechercher le tableau des mots et de comparer à la valeur. Votre code original a cherché à voir si l'élément était un tableau.

 (function() { 'use strict'; function change() { var matches = ["every", "most", "that", "half", "much", "the", "another", "her", "my", "their", "a", "an", "his", "neither", "these", "all", "its", "no", "this", "any", "those", "both", "least", "our", "what", "each", "less", "several", "which", "either", "many", "some", "whose", "enough", "more", "such", "your"], myNewTitle = document.getElementById('myTextField').value, title = document.getElementById('title'), doesMatch = matches.reduce(word => myNewTitle.search(word) >= -1); if (doesMatch) { console.log('yes'); title.style.color = 'green'; } else { console.log('no match'); title.style.color = 'red'; } title.innerHTML = myNewTitle; } document.querySelector('#byBtn').addEventListener('click', change, false); }());

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Using Arrays to change color...</title> </head> <body> <input type="text" id="myTextField" value="his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters." /> <input type="submit" id="byBtn" value="Change" /> <p id="title"></p> </body> </html>

Ok, d'abord vous devez diviser votre valeur de chaîne d'entrée en un tableau.

 var myString = document.getElementById('myTextField').value; myString = myString.split(" ");

Ensuite, vous pouvez comparer les deux tableaux en utilisant les boucles en fonction de la longueur de chaque tableau. Vous allez intégrer une boucle for dans une boucle for comme ceci:

 var matchingWords = document.getElementById("title"); var match = 0; for (var i = 0; i < myString.length; i++) { for (var j = 0; j < matches.length; j++) { if (myString[i] == matches[j]) { match = 1; matchingWords.innerHTML += "<span style='color:blue'>" + " " + myString[i] + " " + "</span>"; } else if ((j == matches.length - 1) && match === 0) { matchingWords.innerHTML += " " + myString[i]; } //else if } // for j } // for i

Vous devrez également définir un déclencheur qui dit essentiellement que cela a été ou n'a pas été égal.

S'il y a une correspondance, définissez la variable de correspondance à 1 pour annuler l'autre si. Mais, s'il n'y a pas eu de correspondance et que vous êtes à la fin de la boucle intérieure, imprimez le mot sans colorier spécial.

Vérifiez ce jFiddle que j'ai fait pour vous. J'espère que ça aide. https://jsfiddle.net/shbrantley/s0nc734p/78/

Voici le HTML complet:

 <input type="text" id="myTextField" value="his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters. " /> <br> <input type="submit" id="byBtn" value="Change" onclick="change()" /> <p id="title"></p>

Voici le javascript complet:

 var matches = ["every", "most", "that", "half", "much", "the", "another", "her", "my", "their", "a", "an", "his", "neither", "these", "all", "its", "no", "this", "any", "those", "both", "least", "our","what", "each", "less", "several", "which", "either", "many", "some", "whose", "enough", "more", "such", "your"]; change = function() { var myString = document.getElementById('myTextField').value; myString = myString.split(" "); var matchingWords = document.getElementById("title"); var match = 0; for (var i = 0; i < myString.length; i++) { for (var j = 0; j < matches.length; j++) { if (myString[i] == matches[j]) { match = 1; matchingWords.innerHTML += "<span style='color:blue'>" + " " + myString[i] + " " + "</span>"; } else if ((j == matches.length - 1) && match === 0) { matchingWords.innerHTML += " " + myString[i]; } //else if } // for j match = 0; // reset match } //for i } //change