Question

我想知道如何更改背景颜色，或者可能是文本区域中修改的文本的颜色。就像假设一样，将具有预定义值的文本区域视为“Hello World”..好吗？现在，如果您尝试将文本区域文本更改为“Hello Universe”，那么现在我想要的是突出显示的Universe（可能是背景颜色更改，或颜色更改或使其变为粗体，任何东西！

我只想强调修改后的文本已被更改。

如果你试着在jsfiddle上做一个例子，我真的很感激。谢谢！

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标记。解析文本后，带有跨度的副本将放在textarea后面的div中。使用正确的css，您可以隐藏该div中的文本，只需将背景颜色设置为突出显示即可。小提琴为您提供了基本的想法，但您需要考虑用户调整文本区域的大小，因为您需要确保文本区域和背后的“荧光笔”对齐。

困难的部分是找出要突出的内容。这样你就不会在第一次改变后突出显示每个角色。看看Levenshtein距离算法，确定在比较两个字符串时需要突出显示哪些字符。

Answer 2

将旧值保留在变量中。
使用分隔符将值拆分为space
按indexOf

space

使用Array#indexOf收听价值change！

最重要的一点是，您无法对style中的字符应用textarea。下面给出的示例在div元素中进行了演示，考虑了textarea

的值

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea>Hello World</textarea>
<div></div>

＆＃13;

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

2 个答案: