使用数组更改输入框中某些字的颜色 [英] Using arrays to change color of certain words in an input box

问题描述

所以我在一个JSFiddle工作，我有点困惑的事情。
我有一个名为myTextField的输入框，带有一个随机段落和一个调用我的更改函数的按钮
当单击按钮时，框中显示的文本将只显示在下面，但我想要它以改变出现在我的数组中的字的颜色，让我们说蓝色。任何帮助将不胜感激，我是非常新的HTML / CSS / JS很抱歉，如果我的一些术语是不正确的

MyHTML

 < input type =textid =myTextFieldvalue =他的第一次进入邻居，这个真理在周围的心灵家庭，他被认为是一些或他们的女儿的合法财产。/> 
< input type =submitid =byBtnvalue =Changeonclick =change（）/> 
< p id =title>< / p> 
   
 
 
 
 Javascript 
  change = function（）{
 var matches = [every，most，that，half，much，the，another，her 我的，他们的，a，an，his，没有，这些，所有，
其，no，this ，两个，最少，我们的，
，什么，每个，少 some，
which，enough，more，such，your]; 
 //如果数组中的值与myTextField中的值匹配
 if（matches === document.getElementById（'myTextField'））
 {
 //更改颜色words 
} 
 var myNewTitle = document.getElementById（'myTextField'）。value; 
 var title = document.getElementById（'title'）; 
 title.innerHTML = myNewTitle; 
} 
  
  https://jsfiddle.net/hnfe3Lgk/  
解决方案
我想你想要的东西像这样：
 
 
 
 
 
 
  change = function（）{var matches = [every，most，that，half 多，该，另一个，她，我的，他们的，a，an，his任何，这些，两者，至少，我们的，什么，每个，少于 any，many，some，which，enough，more，such，your]; //获取myTextField元素的当前值var myTextFieldValue = document.getElementById（'myTextField'）。value; //在每个空格字符分割这个字符串 - 我们现在有一个单个字的数组var myTextFieldWords = myTextFieldValue.split（''）; //对于每个这些单词，测试matches数组是否包含该单词。如果是，请用< span class =match>标签。 var formattedWords = myTextFieldWords.map（function（word）{if（matches.indexOf（word）！== -1）{return'< span class =match>'+ word +'< / span> ;} else {return word;}}）; // formattedWords现在看起来像这样：// ['< span> his< / span>'，'first''entering'，'a'....] //连接格式化的AdWords数组中的所有项每个单词之间的//空格）转换为单个字符串，并将其设置为#title元素的innerHTML document.getElementById（'title'）。innerHTML = formattedWords.join（''）;}  
 
  .match {color：blue;}  / pre> 
 < input type =textid =myTextFieldvalue =his first entering邻居，这个真理在周围家庭的心灵中被很好地固定，他被认为是他们的一个女儿或她们的女儿的合法财产。 />< input type =submitid =byBtnvalue =Changeonclick =change（）/>< p id =title>< / p> $ c> 
 
 
 
 
So I'm working on a JSFiddle and I'm a little confused about something.
I have an input box called myTextField with a random paragraph and a button that calls my change function
When you click the button currently the text displayed in the box will just be displayed below it, but I want it to change the colors of the words that appear in my array to lets say the color blue. Any help would be appreciated, I'm very new to HTML/CSS/JS so sorry if some of my terminology is incorrect

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/
解决方案
I think you want something like this:



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>





                        
这篇关于使用数组更改输入框中某些字的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！