HTML 如何在 textarea 中突出显示文本

在本文中，我们将介绍如何在 HTML 的 textarea 元素中实现文本的高亮显示效果。textarea 是一个常用的 HTML 元素，用于在网页中创建文本输入框。但是默认情况下，textarea 中的文本没有任何样式或格式。

阅读更多：HTML 教程

使用 CSS 来实现高亮效果

要在 textarea 中实现文本的高亮显示效果，一种常见的方法是使用 CSS。可以通过给 textarea 元素添加样式类并使用 CSS 属性来改变文本的样式。

首先，需要给 textarea 元素添加一个样式类。可以通过在 <style> 标签内定义样式类，或者使用 <link> 标签引用外部 CSS 文件的方式进行。

<style>
.highlight {
  background-color: yellow;
  color: black;
}
</style>

<textarea class="highlight">这是一个示例文本，将会被高亮显示。</textarea>

在上述示例中，我们定义了一个名为 “highlight” 的样式类，并将其应用于了 textarea 元素。该样式类设置了背景颜色为黄色（background-color: yellow）以及文本颜色为黑色（color: black）。

这样，当用户在 textarea 中输入文本时，该文本将会以黄色背景和黑色字体进行高亮显示。

使用 JavaScript 来实现高亮效果

除了使用 CSS，我们还可以通过 JavaScript 来实现在 textarea 中高亮显示文本的效果。这种方法适用于需要根据特定条件动态改变文本样式的情况。

首先，需要给 textarea 元素添加一个唯一的 id 属性，以便在 JavaScript 中进行操作。然后，在 JavaScript 代码中通过获取该 textarea 元素的引用，并使用相关的属性和方法来实现高亮效果。

<textarea id="myTextarea">这是一个示例文本，将会被高亮显示。</textarea>

<script>
var textarea = document.getElementById("myTextarea");

textarea.addEventListener("input", function() {
  var start = textarea.selectionStart;
  var end = textarea.selectionEnd;

  var text = textarea.value;
  var highlightedText = '<span class="highlight">' + text.substring(start, end) + '</span>';
  textarea.innerHTML = text.substring(0, start) + highlightedText + text.substring(end);
});
</script>

上述示例代码中，我们首先获取了名为 “myTextarea” 的 textarea 元素，并添加了一个事件监听器，该监听器会在用户输入文本时被触发。

当用户在 textarea 中选中部分文本时，监听器会获取选中的文本的起始位置（start）和结束位置（end）。然后，我们通过获取 textarea 的 value 属性获取完整的文本内容，并根据选中的位置将其中的一部分文本用 <span> 标签包裹起来，并给该 <span> 标签添加了名为 “highlight” 的样式类。

最后，我们使用 innerHTML 属性将处理后的文本内容重新赋值给 textarea，从而实现了文本的高亮显示。

需要注意的是，使用 JavaScript 来实现高亮效果可能会影响到用户的输入体验，因为如果用户输入的内容被 JavaScript 修改，则可能会导致光标位置或者选中文本的位置出现不准确的情况。因此，在使用此方法时需谨慎权衡利弊并适当处理相关问题。