javascript - Modify the text color of the final word entered

Question

javascript - Modify the text color of the final word entered

I am currently working on a text editor project and one of the requirements is to change the font color of the last word typed based on whether it is a keyword or not. Despite trying various solutions, I have yet to find one that works as intended. Here is an overview of what I have attempted so far:

function getLastWord() {
        var input = document.getElementById("my_text").value;
        //var input = document.getElementById(textArea.value);

        var inputValue = input.value;
        var lastWordTyped
        var changeColorOfWord;
        var ele = document.querySelector("#my_text");

        //ele.style.color = "blue"

        if (input == null) {
            input == " ";
        }

        lastWordTyped = input.substr(input.trim().lastIndexOf(" ") + 1);
        //lastWordTyped = inputValue.substr(inputValue.trim().lastIndexOf(" ") + 1);

        if (input != null) {

            for (var i = 0; i < reservedKeyWords.length; i++) {
                if ( lastWordTyped == reservedKeyWords[i] ) {

                    //changeColor(lastWordTyped);
                    //my_text.replace(inputValue, lastWordTyped);
                    //ele.fieldNameElement.innerHTML = lastWordTyped;
                    //ele.innerHTML = lastWordTyped;
                    ele.innerHTML.fontcolor = 'Blue';
                    return;

                } else if (lastWordTyped !== reservedKeyWords[i]) {

                    //ele.innerHTML = ele.innerHTML.replace(lastWordTyped, '<span style="color:black"></span>');
                    //resetFontColor();


                }


            }
        }
    }

One function I tried was sourced from SO and looks like this:

function changeColor(word) {
        var ele = document.querySelector("my_text");
        ele.onkeypress = function () {
            setTimeout(function () {
                document.getElementById('view_text').value = ele.textContent;
                if (ele.innerHTML.indexOf(word) !== -1) {
                    ele.innerHTML = ele.innerHTML.replace(word, '<span style="color:blue">' + word + '</span>');
                }
            }, 50);
        }
    }

In addition, I also experimented with the following function:

function colorMyKeyword(keywordColor, text) {

        return '<span style="color:' + keywordColor + '>' + text + '</span>';
    }

Unfortunately, none of these functions have produced the desired outcome. Although I have managed to change the text color to blue, the issue arises when all the text switches to blue after the specified word...

It would be preferable for me to implement this in javascript since I am not well-versed in JQuery, CSS, or script writing in general...

Your valuable responses are greatly appreciated. Thank you.

javascript jquery css

Answer 1

Answer №1

Code updated based on feedback (changed to div from input field)

Although not perfect, this code should do the job. It is recommended to handle CSS changes by adding a class rather than modifying the style attribute.

<div id="my_text">This text will be altered</div>

var isKeyword = false;
var element = document.getElementById('my_text');
var array = element.innerHTML.split(' ');
var lastWord = array.pop();

/* customize with your keywords */
var reservedKeywords = ['change','this','word', 'too'];


for (var index = 0, length = reservedKeywords.length ; index < length ; index++) {
  if ( lastWord == reservedKeywords[index] ) {
    lastWord = '<span style="color:blue">'+lastWord +'</span>'; //update color
    array.push(lastWord);
    isKeyword = true;
  }
}
if (!isKeyword) { array.push(lastWord); } //retain original word
element.innerHTML = array.join(' ');

Answer 2

Code updated based on feedback (changed to div from input field)

Although not perfect, this code should do the job. It is recommended to handle CSS changes by adding a class rather than modifying the style attribute.

<div id="my_text">This text will be altered</div>

var isKeyword = false;
var element = document.getElementById('my_text');
var array = element.innerHTML.split(' ');
var lastWord = array.pop();

/* customize with your keywords */
var reservedKeywords = ['change','this','word', 'too'];


for (var index = 0, length = reservedKeywords.length ; index < length ; index++) {
  if ( lastWord == reservedKeywords[index] ) {
    lastWord = '<span style="color:blue">'+lastWord +'</span>'; //update color
    array.push(lastWord);
    isKeyword = true;
  }
}
if (!isKeyword) { array.push(lastWord); } //retain original word
element.innerHTML = array.join(' ');

Answer 3

Answer №2

UPDATED: Trigger the action on keyup event

Check out this straightforward example to see it in action: DEMO

$('#text').keyup(function(){
    $('#result').html($('#text').val());
    var splittedText=$('#result').html().split(/\s/);
    var lastWord=splittedText[splittedText.length-1]; 
    $('#result').html($('#result').html().replace(lastWord,'<span>'+lastWord+'</span>'));
    $('#result').children('span').css('color',$('#color').val());
});

Enter a sentence in the first input and a hexadecimal color code (starting with #) in the second one.

Answer 4

UPDATED: Trigger the action on keyup event

Check out this straightforward example to see it in action: DEMO

$('#text').keyup(function(){
    $('#result').html($('#text').val());
    var splittedText=$('#result').html().split(/\s/);
    var lastWord=splittedText[splittedText.length-1]; 
    $('#result').html($('#result').html().replace(lastWord,'<span>'+lastWord+'</span>'));
    $('#result').children('span').css('color',$('#color').val());
});

Enter a sentence in the first input and a hexadecimal color code (starting with #) in the second one.

Answer 5

Answer №3

Trying to address your inquiries:
Referencing @GaryStorey's solution which provided a better foundation compared to my own contributions (I appreciate using pop and push).
The issue with the aforementioned solution was its focus solely on changing colors, without addressing manipulation within an input or contenteditable element.

Therefore, here are my modifications, introducing a setCaret function to manage the scenario where caret repositions to the beginning upon altering the innerHTML of the edited element.

Caution: This code remains prone to bugs and should not be implemented in a production environment,
however, it can offer a strong starting point.

var reservedKeyWords = ['text', 'another', 'word', 'here'];
        var el = document.getElementById('my_text');
        el.addEventListener('keyup', function (evt) {
            if (evt.keyCode == 32 || evt.keyCode == 13) {
                var isKeyword = false;
                var arr = el.innerHTML.split(/\s/);
                var lastWordTyped = arr.pop();
                lastWordTyped = lastWordTyped.replace('&nbsp;', '');
                for (var i = 0, len = reservedKeyWords.length; i < len; i++) {
                    if (lastWordTyped == reservedKeyWords[i]) {
                        lastWordTyped = '<span style="color:blue">' + lastWordTyped + '</span>'; //update color
                        arr.push(lastWordTyped);
                        isKeyword = true;
                    }
                }
                if (!isKeyword) {
                    arr.push(lastWordTyped);
                } //put original back
                el.innerHTML = arr.join(' ') + '&nbsp;';
                setCaret(el);
            }
        });

        function setCaret(el) {
            var range = document.createRange();
            var endNode = el.lastChild;
            range.selectNodeContents(endNode);
            range.setStart(endNode, range.endOffset);
            range.setEnd(endNode, range.endOffset);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        }

#my_text {
    min-width: 100%;
    min-height: 2em;
    padding: 0.5em;
    display: block;
    border : dashed 0.5px grey;
}

<p> list of KeyWords : 'text', 'another', 'word', 'here';</p>
<span id="my_text" contenteditable="true">Edit me using "reservedKeyWords" defined in JS</span>

Also, worth noting that I opted for a span over a div due to the latter adding unneeded <br> tags after the textNode.

Answer 6

Trying to address your inquiries:
Referencing @GaryStorey's solution which provided a better foundation compared to my own contributions (I appreciate using pop and push).
The issue with the aforementioned solution was its focus solely on changing colors, without addressing manipulation within an input or contenteditable element.

Therefore, here are my modifications, introducing a setCaret function to manage the scenario where caret repositions to the beginning upon altering the innerHTML of the edited element.

Caution: This code remains prone to bugs and should not be implemented in a production environment,
however, it can offer a strong starting point.

var reservedKeyWords = ['text', 'another', 'word', 'here'];
        var el = document.getElementById('my_text');
        el.addEventListener('keyup', function (evt) {
            if (evt.keyCode == 32 || evt.keyCode == 13) {
                var isKeyword = false;
                var arr = el.innerHTML.split(/\s/);
                var lastWordTyped = arr.pop();
                lastWordTyped = lastWordTyped.replace('&nbsp;', '');
                for (var i = 0, len = reservedKeyWords.length; i < len; i++) {
                    if (lastWordTyped == reservedKeyWords[i]) {
                        lastWordTyped = '<span style="color:blue">' + lastWordTyped + '</span>'; //update color
                        arr.push(lastWordTyped);
                        isKeyword = true;
                    }
                }
                if (!isKeyword) {
                    arr.push(lastWordTyped);
                } //put original back
                el.innerHTML = arr.join(' ') + '&nbsp;';
                setCaret(el);
            }
        });

        function setCaret(el) {
            var range = document.createRange();
            var endNode = el.lastChild;
            range.selectNodeContents(endNode);
            range.setStart(endNode, range.endOffset);
            range.setEnd(endNode, range.endOffset);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        }

#my_text {
    min-width: 100%;
    min-height: 2em;
    padding: 0.5em;
    display: block;
    border : dashed 0.5px grey;
}

<p> list of KeyWords : 'text', 'another', 'word', 'here';</p>
<span id="my_text" contenteditable="true">Edit me using "reservedKeyWords" defined in JS</span>

Also, worth noting that I opted for a span over a div due to the latter adding unneeded <br> tags after the textNode.

javascript - Modify the text color of the final word entered

Answer №1

Answer №2

Answer №3

Similar questions

Accessing/Storing Pictures in MongoDB using Mongoose

Is it possible for the box-shadow CSS property to include padding?

Failed to cast to ObjectID due to mongoose error

Tips for handling special characters in formData when making a jQuery POST request

How can I create a table without a bottom border?

Previewing multiple images before uploading them using jQuery

jQuery - Show or hide content with a toggle action

When trying to run the "npm start" command, I encountered a syntax error that specifically mentioned the use of

Is there a way to display the result array in Node.js after a MongoDB find query has been executed?

I'm struggling to grasp how to effectively utilize a JSON Object in this situation

What is the best method to style a child input element's placeholder using Tailwind CSS?

The function findOne from Mongoose seems to be non-existent, all while utilizing the Passport library

Populate the dropdown list with option values based on the selection made in the preceding dropdown menu

Using Protractor to extract text from multiple paragraphs

What is the reason behind frameworks and similar tools choosing to deprecate functions rather than simply updating them?

Troubleshooting Vue.js rendering problems on Safari_BROWSER

Retrieve data from XML file using ThickBox

Warning Notification in Opencart Design

Tips for minimizing deep nesting of asynchronous functions in Node.js

The NGRX state in Angular is not being properly saved by the local storage