以编程方式选择与 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)，它只解决了在整个元素中选择文本的问题，它不是这里想要的。问题是选择与某个字符串匹配的文本，在本例中为path to image file，因此用户只需复制/粘贴即可。 （不确定这是否是最好的方法，但我就是这么想的……）。

这可能吗？我猜我们将需要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/

Answer 2

实际上我自己想出了这个...我使用了 Rangy 库 https://code.google.com/p/rangy/ 和这样的代码：

 // Add text to the reply area at the very end, and move the cursor to the very end.
function insertText(textarea, text) {
    textarea = $(textarea);
    textarea.focus();
    textarea.val(textarea.val() + text);
    textarea.focus();
    // Trigger the textarea's keyup to emulate typing.
    textarea.trigger("keyup");
}

// Add text to the reply area, with the options of wrapping it around a selection and selecting a part of it when it's inserted.
function wrapText(textarea, tagStart, tagEnd, selectArgument, defaultArgumentValue) {
textarea = $(textarea);
    // Save the scroll position of the textarea.
    var scrollTop = textarea.scrollTop();
    // Work out what text is currently selected.
    var selectionInfo = textarea.getSelection();
    if (textarea.val().substring(selectionInfo.start, selectionInfo.start + 1).match(/ /)) selectionInfo.start++;
    if (textarea.val().substring(selectionInfo.end - 1, selectionInfo.end).match(/ /)) selectionInfo.end--;
    var selection = textarea.val().substring(selectionInfo.start, selectionInfo.end);
    // Work out the text to insert over the selection.
    selection = selection ? selection : (defaultArgumentValue ? defaultArgumentValue : "");
    var text = tagStart + selection + (typeof tagEnd != "undefined" ? tagEnd : tagStart);
    // Replace the textarea's value.
    textarea.val(textarea.val().substr(0, selectionInfo.start) + text + textarea.val().substr(selectionInfo.end));
    // Scroll back down and refocus on the textarea.
    textarea.focus();
    // If a selectArgument was passed, work out where it is and select it. Otherwise, select the text that was selected
    // before this function was called.
    if (selectArgument) {
        var newStart = selectionInfo.start + tagStart.indexOf(selectArgument);
        var newEnd = newStart + selectArgument.length;
    } else {
        var newStart = selectionInfo.start + tagStart.length;
    var newEnd = newStart + selection.length;
    }
    textarea.selectRange(newStart, newEnd);
    // Trigger the textarea's keyup to emulate typing.
    textarea.trigger("keyup");
}

var bbcode = {
    bold: function(id) {wrapText($("textarea"), "[b]", "[/b]", "", "bolded text");},
};

示例用法：

bbcode.bold();

完整代码（在我做过的一个更大的项目中）：https://github.com/wnajar/textarea