自动识别来自 textarea 的图像（如 StackOverflow）答案

【问题标题】：Automatically recognize an image from textarea (like StackOverflow)自动识别来自 textarea 的图像（如 StackOverflow）
【发布时间】：2012-02-12 12:03:31
【问题描述】：

我想创建自己的“编辑器”（只有代码视图，没有所见即所得），但插入图像时遇到问题。上传和选择图片是通过 blueimp-jQuery-File-Upload 完成的。

我想做的是以与 StackOverflow 相同的方式将它们插入到我的文本区域中（因此没有一些花哨的画廊、模块等）。我上传它，它会自动以这种格式添加到文本区域中

![imageDescription][1]
[1]: http://i.stack.imgur.com/image.jpg

我的问题是如何（可能使用 jQuery/JavaScript）自动识别如果我的文本区域中存在某些图像（所以如果我的文本区域中有这两行），在文本区域下方显示这些图像（或它们的链接) 但如果我删除它们（文本行） - 下面的那些链接/图像就会消失。

也许我应该在每次按键时逐行进行一些“扫描”？也许使用正则表达式，所以如果它是真的（对于两行） - 然后显示下面的图像，而不是它只是一个常规文本。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果您想在编辑器下方立即显示这些图像，您别无选择，只能将其绑定到按键事件。当您获得文本时，您可以执行一些正则表达式操作来捕获图像并将其插入<img src="my image">。之后，在每次按下后检查 imageurl 是否仍然存在于该编辑器中（也许历史记录是一个不错的选择）。如果没有，请删除<img> 标签。

【讨论】：

我在从 textarea 中提取“imageDescription”和“http 链接”时遇到问题。我应该以某种方式将它提取到数组中，这样我就可以轻松地遍历它们并在下面显示它们。
正如我所说，通过使用正则表达式，您可以获得完成此任务的有效方法。否则你可以做简单的字符串操作。这是后一种选择的一个很好的起点-> developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…

【解决方案2】：

如果仍然需要，这里是我做的一些参考。 Javascript 正则表达式替换：

.replace(new RegExp("\_img_([^ ].+?[^ ])\_img_", "g"),"<img src='$1' />")

它实际上是一种可以应用于几乎任何标签的模式。正则表达式如下：

.replace(new RegExp("\___what ever signifier here ___([^ ].+?[^ ])\_____end sign____", "g"),"<tag>$1</tag>")

*记得用 twp 正斜杠转义正则表达式中的特殊字符，例如 *：\\*

另外，如果您想添加更多参数，只需添加另一个 ([^ ].+?[^ ]) 块，然后使用 $2 命名下一个参数的位置，如下所示：

.replace(new RegExp("\\[([^ ].+?[^ ])\\]\\(([^ ].+?[^ ])\\)", "g"),"<a href='$1'>$2</a>")

请注意，我使用双正斜杠转义了 [ ] ( )。查看实际操作：http://jsfiddle.net/xwTGr/

【讨论】：