分享程序员开发的那些事...
更新时间：2022-10-30 18:49:10
我想你想要的东西像这样：
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>