'How to change the background color of the modified text in a text area

I want to know how to change the background color or may be color of the text that was modified in a textarea.

Like suppose, consider a textarea with a pre-defined value as "Hello World".

Now if you try to change the text inside the textarea to "Hello Universe", it should show Universe highlighted (may be background color change, or color change or make it bold, anything.

I just want to get the modified text to be highlighted so it is visible what was changed.

javascripthtmlcssdom


Solution 1:[1]

Highlighting is possible if you make the textarea partially transparent and then had a div behind it where you can clone the content and put span tags around the changed values. The hard part is in figuring out how to diff the string. For an example of highlight certain parts of text "in the text area" see this fiddle:

https://jsfiddle.net/mcgraphix/tn0ahcfx/

<div class="container">
    <div id="highlighter"></div>
    <textarea id="editor" onkeyup="updateHighlight()" 
        value="This is some text in the editor"></textarea>
</div>

JS

  function updateHighlight() {
    //calculate index of changes
    //assume chars 1-10 are different //see my comment for how to calculate what to highlight
    var content = document.getElementById('editor').value;
    var highlighted = '';
    var i = 0;
    while (i < content.length) {
      if (i === 1) {
        highlighted += '<span class="highlighted">';
      } else if (i > 10) {
        highlighted += '</span>'
      }
      highlighted += content.charAt(i);
      i++;
    }

    document.getElementById('highlighter').innerHTML = highlighted;
  }

Basically, as you type the text in the text area is parsed and as text is identified as being in need of highlight, a span tag is wrapped around it. After parsing the text, the copy with the spans is put inside the div that is behind the textarea. With the right css you can hide the text in that div and just put a background color such that it looks highlighted. The fiddle gives you the basic idea but you would have to account for the user resizing the text area as you need to make sure the text area and the "highlighter" behind it are aligned.

The hard part is figuring out what to highlight. such that you don't highlight every character after the first change. Take a look at Levenshtein distance algorithm for determining which characters you need to highlight when comparing two strings.

Solution 2:[2]

  • Keep old value in variable.
  • Split the value using delimiter as space
  • Check indexOf new value after spitting by space
  • Use Array#indexOf to listen the change in value!

Most important point, you can not apply style over characters in textarea. Example given below has a demonstration in div element considering value from textarea

var input = $('textarea');
var div = $('div');
var oldVal = input.val();
var oldArr = oldVal.split(' ');
input.on('input', function() {
  var newVal = this.value;
  var html = [];
  newVal.split(' ').forEach(function(el) {
    if (oldArr.indexOf(el) === -1) {
      html.push('<span style="color:green">' + el + '</span>');
    } else {
      html.push('<span>' + el + '</span>');
    }
  });
  div.html(html.join(' '));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea>Hello World</textarea>
<div></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mcgraphix
Solution 2

Related Questions