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 text area. Like suppose, consider a text area with a pre-defined value as "Hello World".. okay? Now if you try to change the text area text to "Hello Universe" so now what i want is Universe to 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 that this was changed.

I would really appreciate if you try make an example on jsfiddle. Thanks!

回答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>

  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.

回答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>

来源：https://stackoverflow.com/questions/39902858/how-to-change-the-background-color-of-the-modified-text-in-a-text-area

标签

javascript

html

css

dom