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, you what...

现在说我从上面的字符串中选择第二个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()将替换所选text的第一次出现。如何在设置位置替换实际选定的文本？

注意：请问我是否需要澄清更多，问题相当含糊:-( 欢呼声。

Answer 1

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

获得所选文本后，通过从textarea内容的开头到selectionStart点获取一个substr，以及从selectionEnd到textarea内容的结尾选择后的附加文本来获取前置文本

然后设置textarea的值（psuedo）：

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

这种方法实际上是你提出建议的唯一方法，因为它针对您选择的文本的确切部分而不是在匹配的文本上执行replace()，如您所提到的那样将取代第一个发生而不是你选择的。在hello hello hello hello hello这样的文本块中，如果您选择第四个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]);
});

Answer 2

您肯定想要查看Rangy。直接使用replace不够健壮。 CSS Class Applier Module几乎完全符合您的要求。 Tim Down就在这里，如果你在你的问题中添加Rangy作为标签，他可能会评论......

当存在重复文本时，修改导致问题的文本

2 个答案: