我想为<textarea> 元素的某些文本片段添加彩色的摆动下划线。效果类似于拼写检查。
我怎样才能用 javascript 做到这一点，可能在 jquery 的帮助下？
我对 html 标记的唯一控制是通过 javascript。我的第一个想法是为这些文本片段添加样式，但据我所知，只能设置整个 textarea 元素的样式，而不是单个文本片段。
我知道我想要达到的效果是可能的，因为有 commercial software 达到了类似的效果，但我仍在试图找出其中的技巧。
【问题讨论】：
标签： javascript jquery html
使用的方法是隐藏 textarea 并创建一个可编辑的 div（将属性 contenteditable="true" 添加到 div。我不太确定浏览器兼容性）。每次按键时，javascript 都会抓取所有内容，定位拼写错误的单词并在有问题的单词周围放置一个跨度。他们使用 css 在单词下方添加了红色曲线下划线（一小段红色曲线的图像）
考虑一下，他们需要跟踪 div 中光标的位置，以防用户开始在框的中间输入文本，以便在更改内容后脚本将光标返回到正确的位置位置而不是内容块的末尾。
此外，您需要在每次按键时更新 textarea 的值。
[编辑]
这是一个 jsFiddle 的概念证明： http://jsfiddle.net/tEnY8/
底线，当您在框中键入时，该值被放入文本区域，并且任何不正确的单词都带有下划线并变为红色。目前它只将最后一个单词标记为不正确。您需要注释掉该行，取消注释 for 循环，并实现 isMispelled(String) 函数。
[编辑]
这是进一步的概念证明：http://jsfiddle.net/tEnY8/4/
基本上我已经设置了一个拼写正确的单词数组，然后循环检查该单词是否存在于数组中；如果不是，则该词可能拼写错误。
【讨论】：
我认为这在 textarea 中是不可能的，大多数 WYSIWYG 在线编辑器使用 contenteditable div 或 iframe 使其看起来像 textarea 来设置这些元素的 innerHTML 中的文本样式，因此显示在前端，然后您可以获取 div/iframe 的 textContent 或 innerText。使用 jQuery，您可以执行以下操作：
<div contenteditable='true' id='editor'>this is the wrd</div>
$('#editor').html($('#editor').html().replace("wrd", "<span style='color: red;'>wrd</span>"));
根本没有经过测试，但应该正确设置 div 的样式。然后您可以使用 $('#editor').text() 来检索文本值。
【讨论】：
正如你所说，实际上不可能只编辑文本区域的一行的字体或属性。
相反，您链接的网站正在做什么，它使用可编辑的 DIV，并通过 Javascript 和一些巧妙的 CSS 将其链接到隐藏的 textarea（textarea 本身是 display:none 和可见性：隐藏；)
我建议使用 firebug 来看看他们是如何做到的，因为它非常令人印象深刻。
【讨论】：
他们所做的是有一个<div> 元素，他们用它来做所有的样式，它看起来就像一个文本区域。
这篇文章可能会帮助您做一些类似的事情：https://stackoverflow.com/a/3536762/349012
【讨论】：