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

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

我想你想要这样的东西：

＆＃13;

＆＃13;

.match {
  color: blue;
}

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

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来替换。

＆＃13;

＆＃13;

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 = "";
}

＆＃13;

span { color: blue; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

＆＃13;

＆＃13;

_Bool

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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