Question

我想在textarea上制作哈希标签，就像这样

<textarea> hi #hash </textarea>

并改变#hash的颜色，如twitter

Answer 1

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

Answer 2

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

由于无法格式化textarea，您可以使用具有contenteditable属性和简单CSS格式的div来模仿它：

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

Answer 3

我知道你已经得到了这个问题的答案，但是如果某人仍然需要除了标记答案之外的其他解决方案，那么请check this link。希望将来有人帮助......

Answer 4

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

然而，更改文本颜色是另一项业务，因为您无法直接设置textarea样式。我已经设法通过组合，一个小的hacky解决方案来实现它：

首先，您必须使用<div>属性contenteditable而不是<textarea>
要自动突出显示文字，您必须将所有#hashtag提及与另一个可以设置样式的内联html元素包装起来，例如<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);
});
```

Answer 5

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

Answer 6

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

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

Answer 7

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

如何通过jquery更改textarea上的hashtag颜色

7 个答案: