4

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

<textarea> hi #hash </textarea>

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

4

6 回答 6

8

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

于 2013-07-29T22:37:10.050 回答
3

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

由于您无法格式化 textarea，您可以通过使用带有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>');
});
于 2013-07-07T23:53:49.007 回答
2

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

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

  • 首先你必须使用<div>with 属性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);
});
于 2013-11-10T12:17:51.853 回答
1

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

于 2013-07-07T23:47:13.553 回答
1

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

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

于 2013-07-07T23:51:33.960 回答
1

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

于 2013-07-07T23:57:00.427 回答