自动识别文本区域中的图像(如StackOverflow）

Automatically recognize an image from textarea (like StackOverflow)

本文关键字：StackOverflow 图像识别文本区域更新时间：2023-09-26

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

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

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

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

也许我应该对每个按键逐行进行"扫描"？也许使用正则表达式，所以如果它是真的（对于两行），那么显示下面的图像，而不是它只是一个正则文本。

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

如果仍然需要，下面是我所做的一些参考。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/