使用数组更改输入框中某些单词的颜色

Question

所以我正在研究一个JSFiddle，我对某些事情感到有些困惑。 我有一个名为myTextField的输入框，带有一个随机段落和一个调用我的更改功能的按钮当你单击该按钮时，该框中显示的文本将只显示在它下面，但我希望它能改变那些单词的颜色。出现在我的数组中，让我们说蓝色。 任何帮助将不胜感激，我是HTML / CSS / JS的新手，很抱歉，如果我的一些术语不正确

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/

Answer 1

我想你想要这样的东西：

 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> 

Answer 2

这只是一个猜测，但你为什么不尝试这个

这是假设，你想要改变模糊的单词

 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> 

Answer 3

这是我使用一个正则表达式而不是循环的。 在它的核心，它依赖于正则表达式/ ( /(^|\\W)(every|most|...|your)(?=\\W|$)/g进行替换。

 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> 

Answer 4

所以你可以做的是搜索单词数组并与值进行比较。 您的原始代码查看该元素是否为数组。

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

Answer 5

好的，首先你需要将输入字符串值分解为数组。

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

然后，您可以根据每个数组的长度使用for循环比较两个数组。 你将在for循环中嵌入一个for循环，如下所示：

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

您还需要设置一个基本上表示已匹配或未匹配的触发器。

如果匹配，则将匹配变量设置为1以使else if无效。 但是，如果没有匹配并且你在内部循环的末尾然后打印没有特殊着色的单词。

看看我为你制作的这个jFiddle。 我希望这有帮助。 https://jsfiddle.net/shbrantley/s0nc734p/78/

这是完整的HTML：

<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>

这是完整的JavaScript：

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