如何使元素 textarea 自动为子字符串着色？

Question

拥有<textarea> 的最佳方式是什么，您可以在其中写字，它会自动将red 的单词涂成红色？

即使它没有被空格包围，它也应该着色。
因此，例如，它应该仍然适用于文本 I ate tha'red-meat 和单词 reddit。

This 是查找包含red 的单词的理想场所。

我有以下代码：

body {
  margin: 0;
}
textarea {
  background-color: GhostWhite;
  border: 0;
  height: 100%;
  outline: none;
  resize: none;
  width: 100%;
}

<textarea spellcheck="false"></textarea>

Answer 1

你不能用textarea来做，而是使用contenteditable跨度（建议span以避免输入<时出现问题）并使用跨度包装颜色子字符串。

var div = document.getElementById('div');

div.addEventListener('input', function() {
    // get the current position
    var pos = getCaretCharacterOffsetWithin(this);
  // get all word in the content  
  this.innerHTML = this.innerText.replace(/\w+/g, function(m) {
    // create a temporary span element
    var temp = document.createElement('span');
    // set current word as color
    temp.style.color = m;
    // check color is valid by rechecking the proeprty
    if (temp.style.color) {
      // if valid color then replace with temp elements html after setting content
      temp.innerHTML = m;
      return temp.outerHTML;
    }
    // else return the word itself
    return m;
  })
  // set caret position
  setCaretPosition(this, pos);
})



// following code is copied from following question
// https://stackoverflow.com/questions/26139475/restore-cursor-position-after-changing-contenteditable

function getCaretCharacterOffsetWithin(element) {
  var caretOffset = 0;
  var doc = element.ownerDocument || element.document;
  var win = doc.defaultView || doc.parentWindow;
  var sel;
  if (typeof win.getSelection != "undefined") {
    sel = win.getSelection();
    if (sel.rangeCount > 0) {
      var range = win.getSelection().getRangeAt(0);
      var preCaretRange = range.cloneRange();
      preCaretRange.selectNodeContents(element);
      preCaretRange.setEnd(range.endContainer, range.endOffset);
      caretOffset = preCaretRange.toString().length;
    }
  } else if ((sel = doc.selection) && sel.type != "Control") {
    var textRange = sel.createRange();
    var preCaretTextRange = doc.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
  }
  return caretOffset;
}

function setCaretPosition(element, offset) {
  var range = document.createRange();
  var sel = window.getSelection();

  //select appropriate node
  var currentNode = null;
  var previousNode = null;

  for (var i = 0; i < element.childNodes.length; i++) {
    //save previous node
    previousNode = currentNode;

    //get current node
    currentNode = element.childNodes[i];
    //if we get span or something else then we should get child node
    while (currentNode.childNodes.length > 0) {
      currentNode = currentNode.childNodes[0];
    }

    //calc offset in current node
    if (previousNode != null) {
      offset -= previousNode.length;
    }
    //check whether current node has enough length
    if (offset <= currentNode.length) {
      break;
    }
  }
  //move caret to specified offset
  if (currentNode != null) {
    range.setStart(currentNode, offset);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  }
}

<span contenteditable="true" id="div">sss</span>

注意：位置保留代码复制自：Restore cursor position after changing contenteditable

---

更新：如果您只想在任何单词中替换 red，那么您可以这样做：

var div = document.getElementById('div');

div.addEventListener('input', function() {
  var pos = getCaretCharacterOffsetWithin(this);
  // get all red subtring and wrap it with span
  this.innerHTML = this.innerText.replace(/red/g, '<span style="color:red">$&</span>')
  setCaretPosition(this, pos);
})



// following code is copied from following question
// https://stackoverflow.com/questions/26139475/restore-cursor-position-after-changing-contenteditable

function getCaretCharacterOffsetWithin(element) {
  var caretOffset = 0;
  var doc = element.ownerDocument || element.document;
  var win = doc.defaultView || doc.parentWindow;
  var sel;
  if (typeof win.getSelection != "undefined") {
    sel = win.getSelection();
    if (sel.rangeCount > 0) {
      var range = win.getSelection().getRangeAt(0);
      var preCaretRange = range.cloneRange();
      preCaretRange.selectNodeContents(element);
      preCaretRange.setEnd(range.endContainer, range.endOffset);
      caretOffset = preCaretRange.toString().length;
    }
  } else if ((sel = doc.selection) && sel.type != "Control") {
    var textRange = sel.createRange();
    var preCaretTextRange = doc.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
  }
  return caretOffset;
}

function setCaretPosition(element, offset) {
  var range = document.createRange();
  var sel = window.getSelection();

  //select appropriate node
  var currentNode = null;
  var previousNode = null;

  for (var i = 0; i < element.childNodes.length; i++) {
    //save previous node
    previousNode = currentNode;

    //get current node
    currentNode = element.childNodes[i];
    //if we get span or something else then we should get child node
    while (currentNode.childNodes.length > 0) {
      currentNode = currentNode.childNodes[0];
    }

    //calc offset in current node
    if (previousNode != null) {
      offset -= previousNode.length;
    }
    //check whether current node has enough length
    if (offset <= currentNode.length) {
      break;
    }
  }
  //move caret to specified offset
  if (currentNode != null) {
    range.setStart(currentNode, offset);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  }
}

<span contenteditable="true" id="div" style="width:100%;display:block">sss</span>

注意：此解决方案存在与换行相关的一些问题，因为内容是 HTML，并且换行没有任何意义。

Answer 2

因此，您可以使用 contenteditable div，匹配前面没有 > 的任何红色，并将红色替换为："$1<span class='specialColor'>red</span>‌" 末尾的零宽度非连接字符用作跨度的分隔符。

document.getElementById('foo').addEventListener('input', function(e) {
  var re = /([^\>])red/;
  var split = this.innerHTML.replace(re, "$1<span class='specialColor'>red</span>&zwnj;");
  this.innerHTML = split;
  placeCaretAtEnd(this);
})

function placeCaretAtEnd(el) {
  el.focus();
  if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (typeof document.body.createTextRange != "undefined") {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
  }
}

body {
  margin: 0;
}
textarea {
  background-color: GhostWhite;
  border: 0;
  height: 100%;
  outline: none;
  resize: none;
  width: 100%;
}

.specialColor {
  color:red;
}

<div id="foo" contenteditable spellcheck="false"></div>

免责声明：

placeCaretAtEnd() 方法取自这个 SO 答案：contenteditable, set caret at the end of the text (cross-browser)

Answer 3

您不能在input 或textarea 等可编辑输入区域内向文本添加部分样式。它被视为单个文本块，只能作为一个整体进行样式设置。

但是，可以通过巧妙定位样式化的span 元素来模拟所需的效果。

有一个这样的项目可以提供即时文本突出显示。看看他们：Code Mirror Project

我在我的一个个人项目中使用了 codemirror。你也应该看看它。 See the editable pane on the left

Answer 4

我唯一不满意的是它如何处理换行符和制表符。 它比只替换红色稍微复杂一点，但这样你可以用任何颜色突出显示任何单词，甚至可能在同一个元素上混合其中的几个，所以使用的函数是可重用的。

<html>
<head>
    <style>
    #myTextarea {
        border: 1px solid black;
        border-radius: 5px;
        min-height: 50px;
        width: 50%;
    }
    .hl-red {
        color: red;
    }
    </style>
</head>
<body>
<div id="myTextarea" contenteditable>Test string</div>
<script>
var createHighlighter = function createHighlighter( word ) {
    // Let's create a reusable function that can highlight any word.
    // You call this function providing the word you want highlighted.
    // Then this returns a function that will insert some html spans around each instance of the word.
    // You can the call the returned function with any string to get the string saturated with the span tags.
    return function highlight( str ) {
        // We split on the word we want to highlight, so our array contains all the non-highlighted chunks.
        // Since we can call the function multiple times in a row, we will usually want to remove the previous highlights, so we don't double-highlight it.
        // This can be easily done with a simple global replace regex.
        var chunks;
        if (str === '<br>') return '';
        else {
            chunks = str.replace(/\<span\sclass="hl-red"\>/g, '').replace(/\<\/span\>/g, '').split(word);
            // Then we add the non-highlighted text + the <span> + the highlighted word.
            return chunks.reduce(function( html, chunk, index ) {
                html += chunk;
                // Add the highlighted word, except for the last chunk, since that's just the end of the string.
                if ((index + 1) !== chunks.length) html += '<span class="hl-red">' + word + '</span>';
                return html;
            }, '');
        }
    };
};

var wordToHighlight = 'red';

var highlightRed = createHighlighter( wordToHighlight );

var highlightArea = function highlightArea( event ) {
    event.target.innerHTML = highlightRed( event.target.innerHTML );
};

document.querySelector('#myTextarea').addEventListener('keyup', highlightArea);

</script>
</body>
</html>