Question

好的我正在制作一个文本编辑器，并且必须尝试根据它是否是关键字来改变字体颜色的最后一个字体...我已经尝试了多种解决方案，但没有任何优势。这是我到目前为止所尝试的内容

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


                }


            }
        }
    }

我尝试过这个功能（从SO中找到）

function changeColor(word) {
        var ele = document.querySelector("my_text");
        ele.onkeypress = function () {
            setTimeout(function () {
                //the setTimeout is so the content is inserted before execution
                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);
        }
        }

我也试过这个：

function colorMyKeyword(keywordColor, text) {

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

这些功能都没有完成工作。我现在有它，所以它会将文本颜色更改为蓝色，但问题是它在该单词之后将所有文本更改为蓝色...

我更喜欢这是javascript，因为我不知道如何使用JQuery，或者真的是CSS，甚至知道如何编写它。

感谢您的回复。

Answer 1

根据以下评论更新了代码（从输入更改为div）

不是世界上最好的代码，但应该有效。可能应该通过添加类而不是更改style属性来完成CSS。

<div id="my_text">This is some text</div>

var isKeyword = false;
var el = document.getElementById('my_text');
var arr = el.innerHTML.split(' ');
var lastWordTyped = arr.pop();

/* replace with yours*/
var reservedKeyWords = ['text','another','word', 'here'];


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

Answer 2

更新：在keyup上做全部事情

这是一个可以使用的简单示例： 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());
});

你需要在第一个输入中写一个句子，在第二个输入中写一个hexa-deciaml颜色。（包括开头的＃）

Answer 3

以下是尝试回答您的问题：
我使用的是@GaryStorey's answer，因为这是一个比我添加的更好的起点（我喜欢pop＆amp; push）。
他的答案的问题在于它只展示了如何改变颜色，但它与输入或输入元素中的方法无关。

所以这是我的调整，使用setCaret函数来处理如果我们确实更改了编辑元素的innerHTML，则插入总是返回开始的事实。

小心，它仍然非常多，你不应该在任何生产中使用，
但它可以给你一个很好的起点。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

哦，请注意我使用的是span而不是div，因为div标记会在textNode之后的任何地方添加一些<br>。

javascript - 更改键入的最后一个单词的字体颜色

3 个答案: