javascript - 存在重复文本时修改文本会导致问题

Question

好吧，基本上我有一个带有 textarea 的表单，用户可以在其中添加内容并将一些 bbcode 应用于所选文本。

现在我用这个函数获取选定的文本:

selection_get: function() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

并且工作正常，唯一的问题是是否存在重复的内容，例如:

你什么，你什么...

现在假设我从上面的字符串中选择第二个you what并通过如下方式运行它:

// get the selected text
var text = selection_get();
var original_text = $('textarea').val();
var newtext = '[b]you what[/b]';

$(container).val(original_text.replace(text, newtext));

现在 newtext 将是应用了 bbcode 的所选代码(为了本示例，我们将其设置为 [b]you what[/b]).

问题是 replace() 将替换所选 文本 的第一个匹配项。如何将实际选定的文本替换到其设置位置？

注意:请询问我是否需要澄清更多，这个问题相当模糊:-( 干杯。

Answer 1

使用selectionStart和 selectionEnd属性并在两端添加您的 BBcode。

获得所选文本后，通过获取从文本区域内容的开头到选择起始点的子字符串以及从选择结束到文本区域内容末尾的选择后的附加文本来获取前置文本。

然后像这样设置文本区域的值(psuedo):

$('textarea').val( prependingText + BBCodeStartTag + selectedText + BBCodeEndTag + endText );
// e.g. :          You what,        [b]              you what       [/b]           ...

此方法实际上是执行您提议的操作的唯一方法，因为它针对您选择的文本的确切部分，而不是对匹配的文本执行 replace()提及将替换第一次出现的内容，而不是您选择的内容。在像 hello hello hello hello hello 这样的文本 block 中，如果您选择第四个 hello，您的代码将替换第一个 hello...

编辑: here's an example使用function from this answer来说明这个想法:

function getSelected() {
    var editor = $('textarea');

    var u     = editor.val();
    var start = editor.get(0).selectionStart;
    var end   = editor.get(0).selectionEnd;

    return [u.substring(0, start), u.substring(end), u.substring(start, end)];
}

$('#ButtonToAddBBCode').click(function(e) {
    e.preventDefault();
    var bits = getSelected();
    var bb = ['[b]', '[/b]']; // your example BB code
    $('textarea').val(bits[0] + bb[0] + bits[2] + bb[1] + bits[1]);
});