Utilizing arrays to dynamically alter the text color of specific words in an input field

Question

Utilizing arrays to dynamically alter the text color of specific words in an input field

Currently, I am in the process of working on a JSFiddle and find myself a bit puzzled by a certain aspect. Within my project, I have an input box named myTextField which contains a random paragraph. Additionally, there is a button that triggers my change function. Presently, when the button is clicked, the text displayed in the box is simply shown below it. However, I am seeking to enhance this functionality by changing the color of specific words from an array, let's say to blue. Any guidance on this matter would be greatly appreciated, as I am relatively new to HTML/CSS/JS and may not have all the correct terminology at my disposal.

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/

javascript html css

Answer 1

Answer №1

If you're looking for a solution, consider the following approach:

transform = function() {
  var keywords = ["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"
  ];

  // retrieve the current value of the "myTextField" element
  var myTextFieldValue = document.getElementById('myTextField').value;

  // split the string at every space character to form an array of words
  var myTextFieldWords = myTextFieldValue.split(' ');

  // for each word, check if it is present in the "keywords" array
  // if yes, wrap it in a <span class="match"> tag
  var formattedWords = myTextFieldWords.map(function(word) {
    if (keywords.indexOf(word) !== -1) {
      return '<span class="match">' + word + '</span>';
    } else {
      return word;
    }
  });

  // formattedWords now represents the words with tags
  // join all the words in the formattedWords array with a space
  // 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="Transform" onclick="transform()" />
<p id="title"></p>

Answer 2

If you're looking for a solution, consider the following approach:

transform = function() {
  var keywords = ["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"
  ];

  // retrieve the current value of the "myTextField" element
  var myTextFieldValue = document.getElementById('myTextField').value;

  // split the string at every space character to form an array of words
  var myTextFieldWords = myTextFieldValue.split(' ');

  // for each word, check if it is present in the "keywords" array
  // if yes, wrap it in a <span class="match"> tag
  var formattedWords = myTextFieldWords.map(function(word) {
    if (keywords.indexOf(word) !== -1) {
      return '<span class="match">' + word + '</span>';
    } else {
      return word;
    }
  });

  // formattedWords now represents the words with tags
  // join all the words in the formattedWords array with a space
  // 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="Transform" onclick="transform()" />
<p id="title"></p>

Answer 3

Answer №2

Here's a possible solution you could try out

Suppose you're looking to alter the text displayed when the field loses focus

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 4

Here's a possible solution you could try out

Suppose you're looking to alter the text displayed when the field loses focus

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 5

Answer №3

My solution utilizes a single regular expression and avoids the need for any looping. The key component is the regex pattern

/(^|\W)(every|most|...|your)(?=\W|$)/g

used for replacement.

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 6

My solution utilizes a single regular expression and avoids the need for any looping. The key component is the regex pattern

/(^|\W)(every|most|...|your)(?=\W|$)/g

used for replacement.

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 7

Answer №4

To find a solution, you can search the word array and compare it to the value. The original code checked whether the element was an array.

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

To find a solution, you can search the word array and compare it to the value. The original code checked whether the element was an array.

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

Answer №5

To begin, you'll first want to divide your input string value into an array.

var inputString = document.getElementById('inputField').value;
inputString = inputString.split(" ");

Next, you can compare the two arrays using nested for loops that iterate based on the length of each array. Here's how you can embed a for loop within another:

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

Additionally, you'll need to establish a trigger that determines whether a match has been found or not.

If a match is found, set the match variable to 1 to bypass the else if condition. However, if no match is found and you reach the end of the inner loop, print the word without any special coloring.

Feel free to check out this jFiddle link I've prepared for you. I hope this explanation proves to be helpful. https://jsfiddle.net/unique/s0nc734p/78/

Below is the complete HTML code snippet:

<input type="text" id="inputField" 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="changeBtn" value="Change" onclick="change()" />
<p id="output"></p>

And here is the complete JavaScript code snippet:

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 inputString = document.getElementById('inputField').value;
  inputString = inputString.split(" ");
  var matchingWords = document.getElementById("output");
  var match = 0;
  for (var i = 0; i < inputString.length; i++) {
    for (var j = 0; j < matches.length; j++) {
      if (inputString[i] == matches[j]) {
        match = 1;
        matchingWords.innerHTML += "<span style='color:blue'>" + " " + inputString[i] + " " + "</span>";
      } else if ((j == matches.length - 1) && match === 0) {
        matchingWords.innerHTML += " " + inputString[i];
      } //else if
    } // for j
    match = 0; // reset match
  } //for i
} //change

Answer 10

To begin, you'll first want to divide your input string value into an array.

var inputString = document.getElementById('inputField').value;
inputString = inputString.split(" ");

Next, you can compare the two arrays using nested for loops that iterate based on the length of each array. Here's how you can embed a for loop within another:

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

Additionally, you'll need to establish a trigger that determines whether a match has been found or not.

If a match is found, set the match variable to 1 to bypass the else if condition. However, if no match is found and you reach the end of the inner loop, print the word without any special coloring.

Feel free to check out this jFiddle link I've prepared for you. I hope this explanation proves to be helpful. https://jsfiddle.net/unique/s0nc734p/78/

Below is the complete HTML code snippet:

<input type="text" id="inputField" 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="changeBtn" value="Change" onclick="change()" />
<p id="output"></p>

And here is the complete JavaScript code snippet:

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 inputString = document.getElementById('inputField').value;
  inputString = inputString.split(" ");
  var matchingWords = document.getElementById("output");
  var match = 0;
  for (var i = 0; i < inputString.length; i++) {
    for (var j = 0; j < matches.length; j++) {
      if (inputString[i] == matches[j]) {
        match = 1;
        matchingWords.innerHTML += "<span style='color:blue'>" + " " + inputString[i] + " " + "</span>";
      } else if ((j == matches.length - 1) && match === 0) {
        matchingWords.innerHTML += " " + inputString[i];
      } //else if
    } // for j
    match = 0; // reset match
  } //for i
} //change

Utilizing arrays to dynamically alter the text color of specific words in an input field

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the process of invoking Link manually in React-router?

Identifying the initial object with a duplicate property within an array of objects using JavaScript

Using BeautifulSoup to Retrieve JPEG from an Image Tag's Src Attribute

Utilizing JavaScript for loops to extract the final element from an array

Modify text input when a different option is selected (with both options originally coming from a database)

Tips for sending an array of data from the client to req.body in an axios request

KineticJs: Enhancing Rotation with Multitouch Capability

What could be the reason my script fails to execute during an AJAX refresh?

Struggling to incorporate infinite scroll feature into JSON script that is already functioning smoothly

Using jQuery to make an element follow you as you scroll down a page inside a div

Display or conceal numerous WTForm labels

Add characterizations to object utilizing cropper plugin

Ways to retrieve the upcoming possible date

Ways to create a fixed button positioned statically at the bottom of a page

Adding jQuery SVG Sources to SVG Elements

Achieve a floating right alignment of an unordered list navigation using CSS without changing

Protractor and Jasmine fail to fulfill the promise of retrieving a webpage title

Unable to redirect to Jade page in Node.js

I'm trying to set it up so that an image pops up when I hover over text. I've tried incorporating a few different JavaScripts, but I still can

Manipulating SVG on a UIWebview dynamically