javascript - 以编程方式选择与 textarea 元素中的字符串匹配的文本(就像用鼠标完成的那样)

Question

考虑以下问题:

有一个像这样的文本区域:

<textarea id="body" name="body"></textarea>

还有一些简单的 JavaScript (jQuery) 可以将一些新文本插入文本区域，以便用户可以嵌入图像:

$('textarea').val($('textarea').val() + '[img]path to image file[/img]');

诀窍是在插入文本后自动突出显示 [img][/img] 标签之间的文本，这样用户就可以快速复制并粘贴他们的图像 URL，而不是手动选择，然后复制和粘贴。

我绞尽脑汁，在互联网上到处寻找，试图解决这个问题，我能做的最好的就是这个流行的 StackOverflow 问题 Selecting text in an element (akin to highlighting with your mouse)它只解决了在 ENTIRE 元素中选择文本的问题，这不是这里所需要的。问题是选择与特定字符串匹配的文本，在本例中为 图像文件路径，因此用户只需复制/粘贴即可。 (不确定这是否是最好的方法，但这就是我的想法...)。

这可能吗？我猜我们将需要 getSelection() 和 createRange() 但除此之外我不知道去哪里......任何 JavaScript 向导都认为这个已经出来了吗？我觉得这可能是一个热门问题。使用 jQuery 很好，因为我已经在文档的其余部分使用了它。

Answer 1

您可以使用我的 jQuery 插件。它解决了文本区域选择操作中的浏览器差异，并具有一些方便的方法:

https://code.google.com/p/rangyinputs/

对于你的例子，代码是

var $textarea = $("#body");
var text = "path to image file"
$textarea.replaceSelectedText(text, "select");
$textarea.surroundSelectedText("[img]", "[/img]");

演示:http://jsfiddle.net/P8Jrh/1/