Highlight words in input field html

Question

I want some kind of input field in html like textarea, or a div which is editable to highlight special words like Hi or foo. I know that there are some syntax highlighting script out there - Prettify, Syntax Highlighter, highlight.js, etc. However would have to adapt them pretty heavily, because "HI" isn't a token in a programming language. I don't know how to do this / code one by myself.

(I've thought of some kind of string.split by chars and then adding those chars together until I have "HI" for example, but I don't know how to color those words then. span with color? But how would I remove that span if the word is deleted?)

Do you have advice?

Thanks in advance

https://stackoverflow.com/questions/10341843/how-to-highlight-a-part-part-of-an-input-text-field-in-html-using-javascript-or — Seth McClaine, May 20 '18 at 14:20
Thanks for your answer, however using the method you mentioned, I can only highlight one word, not a "Hi" and a "foo". ( I think) — pgr4567, May 20 '18 at 14:24
You can't do that with an input. You would need to use a div (or maybe a span?) and set type="text". On change you would need to parse the div and add highlighting span... — Seth McClaine, May 20 '18 at 14:29
Possible duplicate of [How to highlight a part part of an Input text field in HTML using Javascript or JQuery](https://stackoverflow.com/questions/10341843/how-to-highlight-a-part-part-of-an-input-text-field-in-html-using-javascript-or) — Roshana Pitigala, May 20 '18 at 15:26

score 2 · Answer 1 · answered May 20 '18 at 15:18

2

Heres a simple example in JSFiddle (Note updates on blur)

JSFiddle

https://jsfiddle.net/ug7xmgx0/3/

HTML

<div id="textInput" type="text"contenteditable="true">
 Example on foo bar
</div>

JS

$(document).ready(function () {
  var handleChange = function(e) {
    var newVal = '';
        var words = $('div').text().split(' ');
    $(words).each(function(key, val){
      newVal += `<span class="${val}">${val}</span> `;
    });
    $('div').html(newVal);
  };
  $('div').blur(handleChange);
  handleChange();
});

CSS

.on {
  color: red;
}
.foo {
  color: yellow;
}

There are a ton of ways to do this. This is a real simple way to do it, but isn't super efficient or focused on UX.

answered May 20 '18 at 15:18

Seth McClaine

9,142
6
38
64

Thank you! This works, however it only gets called, when I click out of the div. How would I implement this in an onChange event? I add this onClick function: addEventListener("input", highlight, false); Highlight gets executed whenever the text changes. What should I put inside the function? – pgr4567 May 20 '18 at 15:50
Just got it, but now I faced another problem :( The caret gets put to the start when I update the div and doesn't stay in place... Do you know how to fix this? – pgr4567 May 20 '18 at 16:11
You can use `keyup` this will fire after every key stroke. In this example you are replacing the text on `change` which causes the cursor to move to the beginning. You should research how to keep the placement of the cursor on replacement of the text to resolve this new request. – Seth McClaine May 21 '18 at 01:53
to get you started: https://stackoverflow.com/questions/20736915/cursor-moves-to-beginning-of-text-when-i-update-text-with-javascript – Seth McClaine May 21 '18 at 01:54
I used this: http://jsfiddle.net/WeWy7/3/ and called doSave before your function and doLoad after your function is done. It works now, everything is colored correctly, but I can´t do newlines anymore... – pgr4567 May 21 '18 at 11:30

Highlight words in input field html

1 Answers1