我如何通过 jquery 更改 textarea 上的主题标签颜色答案

【问题标题】：How can i change hashtag color on textarea by jquery我如何通过 jquery 更改 textarea 上的主题标签颜色
【发布时间】：2013-07-05 05:49:53
【问题描述】：

我想像这样在 textarea 上制作井号标签

<textarea> hi #hash </textarea>

并像推特一样改变#hash的颜色

【问题讨论】：

为什么是textarea？当用户输入文本时它应该动态改变颜色吗？
我知道你得到了这个答案，但如果有人仍然想要一个不同于标记答案的解决方案，那么请check this link。希望它对未来的人有所帮助......

标签： jquery twitter textarea

【解决方案1】：

我为此制作了一个插件，因为我遇到了同样的问题。看这里：http://ponjimon.github.io/jquery-hashtags/

【讨论】：

是否支持@符号
在当前状态下，不，它没有。也许我会更新它或有人提出拉取请求。但我没有时间在 atm 开发它。
现在好像支持@了，刚刚实现。谢谢西蒙！
链接已损坏 - 404。:(
抱歉，我在 GitHub 上更改了我的用户名：lookapanda.github.io/jquery-hashtags :)

【解决方案2】：

一个简单的建议（未经测试）：

由于您无法格式化文本区域，您可以通过使用带有contenteditable 属性的 div 和简单的 CSS 格式化来模仿它：

<div id='textarea' contenteditable style="overflow: scroll; border: 1px solid black; width: 200px; height: 100px;"></div>

然后，几行 JavaScript（和 jQuery）：

// when user finished editing
$('#textarea').blur(function() {
    // replace hashtags (parsing should prob. be enhanced)
    $(this).html($(this).html().replace(/(#\S+)/, '<span style="color: blue">$1</span>');
});

【讨论】：

请注意，contenteditable 容易产生一些冗长的 html（取决于浏览器），尤其是在用户粘贴某些内容时。
我试试 ")); }); });
但我想在 textarea 上实现
@MahmoudSamy 正如我上面提到的，在<textarea> 中使用 HTML 不可能。您将不得不使用这个或类似的解决方案，例如 --> this（检查 HTML！）
@marsze 它不正确支持 Unicode 字符，并且当第一个字符为 # 以及用户粘贴或剪切内容时也会出现突出显示问题
@FarzadYZ 我不是作者，请联系他们。

【解决方案3】：

如果您只想突出显示 textarea 中的文本，这没问题 - 在这种情况下，jquery-hashtags 做得很好。

但是，更改文本颜色是另一回事，因为您不能直接设置 textarea 的样式。我已经设法通过组合的、有点 hacky 的解决方案来完成它：

首先你必须使用<div> 属性contenteditable 而不是<textarea>
要自动突出显示文本，您必须使用另一个可以设置样式的内联 html 元素来包装所有提及的#hashtag，例如<span style="...">。 RegEx 在这方面做得很好：
```
//Bind this on keyup event
var text = text.replace(/<\/?span>/g, '').replace(/([#]+[A-Za-z0-9-_]+)/g, '<span>$1</span>');
```
但是，keyup 上的文本替换会产生另一个问题 - 它会重置您的文本光标，因此几乎不可能键入。为了解决这个问题，Rangy 来帮忙。它是文本选择库，提供一些实用程序来操作文本字段中的光标位置。要将光标保持在原位，您必须在应用文本替换之前保存它并在它发生后重置它。这是完整的代码：
```
$("#notes-editor").on("keyup", function(){
  var text = $(this).html();

  text = text.replace(/<\/?span>/g, '').replace(/([#]+[A-Za-z0-9-_]+)/g, '<span>$1</span>');

  savedSel = rangy.getSelection().saveCharacterRanges(this);
  $(this).html(text);
  rangy.getSelection().restoreCharacterRanges(this, savedSel);
});
```

【讨论】：

【解决方案4】：

你不能在<textarea> 中这样做。您需要在<div> 中执行此操作，并编写一组键盘处理程序以在用户键入时更新内容。这不是一项简单的任务。看看使用CKEDITOR 之类的东西，虽然我怀疑这不是你工作的真正工具。

【讨论】：

【解决方案5】：

由于 textareas 不支持允许您为特定单词或表达式着色的标记，您需要做的是创建一个 <div>，您可以在 javascript 或 jQuery 中绑定一个 keyup 事件。通过使用这个 keyup 事件，您可以将键入的字母插入到 div 中，就像有人在文本区域中键入一样。接下来，要为特定主题标签着色，您需要创建一个正则表达式，然后使用 replace 函数将其包装在 <a> 标签中并添加所有必要的属性。

我发现了这个关于解析类似 twitter 的用户名和主题标签的酷教程：http://www.simonwhatley.co.uk/parsing-twitter-usernames-hashtags-and-urls-with-javascript

【讨论】：

我认为使用多个现有编辑器中的一个比尝试构建自己的编辑器更好，尤其是考虑到人们在文本输入中习惯使用的键盘快捷键的所有复杂性。
是的，我绝对同意。如果它们符合我的目的，我更喜欢使用已经存在的库，而不是重新发明轮子。

【解决方案6】：

我认为CodeMirror 或类似的编辑器可以解决您的问题——只需添加自定义荧光笔即可。唯一的问题是编辑器应该支持可变宽度字体，但我认为 CodeMirror 支持。

【讨论】：