如何更改文本区域中已修改文本的背景颜色

Question

我想知道如何更改背景颜色，或者可能是在 textarea 中修改的文本的颜色。

假设，考虑一个文本区域，其预定义值为“Hello World”。

现在，如果您尝试将 textarea 中的文本更改为“Hello Universe”，它应该会突出显示 Universe（可能是背景颜色更改、颜色更改或使其变为粗体等。

我只想突出显示修改后的文本，以便看到更改的内容。

Answer 1

如果您使 textarea 部分透明，然后在其后面有一个 div，您可以在其中克隆内容并在更改的值周围放置 span 标签，则可以突出显示。困难的部分是弄清楚如何区分字符串。有关“在文本区域”中突出显示某些文本部分的示例，请参见此小提琴：

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

基本上，当您键入文本区域中的文本时，文本被解析并且文本被识别为需要突出显示时，会在其周围环绕一个 span 标签。解析文本后，将带有 span 的副本放在 textarea 后面的 div 中。使用正确的 css，您可以隐藏该 div 中的文本，只需放置一个背景颜色，使其看起来突出显示。小提琴为您提供了基本概念，但您必须考虑用户调整文本区域的大小，因为您需要确保文本区域和它后面的“荧光笔”对齐。

最困难的部分是弄清楚要突出显示的内容。这样您就不会在第一次更改后突出显示每个字符。看看 Levenshtein 距离算法，用于确定比较两个字符串时需要突出显示的字符。

Answer 2

• 在变量中保留旧值。
• 使用分隔符将值拆分为space
• 检查indexOfspace 吐出后的新值
• 使用Array#indexOf 监听change 的值！

最重要的一点，您不能将style 应用于textarea 中的字符。下面给出的示例在 div 元素中进行了演示，考虑了来自 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>