javascript - 文本框中的前缀/后缀突出显示的文本

Question

我必须制作一个小的 javascript 函数，为文本框中的选定文本添加前缀和后缀。

这是我目前所拥有的:

function AddTags(name, prefix, suffix) {
    try
    {
        var textArea = document.getElementById(name).value;
        var i = 0;
        var textArray = textArea.split("\n");
        if (textArray == null) {
            document.getElementById(name).value += prefix + suffix
        }
        else {
            for (i = 0; i < textArray.length; i++) {
                textArray[i] = prefix + textArray[i] + suffix;
            }
            document.getElementById(name).value = textArray.join("\n");
        }
    }
    catch (err) { }
}

现在这个函数将提供的前缀和后缀添加到每一行，但我需要找出如何在 Text before selection, Selected text 中分解我的文本框的文本和选择后的文本。

有人对此有经验吗？

编辑:TriniBoy 的功能让我走上了正确的轨道。我不需要整个建议。这是我的原始代码的编辑版本:

    function AddTags(name, prefix, suffix) {
    try
    {
        var textArea = document.getElementById(name);
        var i = 0;
        var selStart = textArea.selectionStart;
        var selEnd = textArea.selectionEnd;
        var textbefore = textArea.value.substring(0, selStart);
        var selected = textArea.value.substring(selStart, selEnd);
        var textAfter = textArea.value.substring(selEnd);
        if (textAfter == "") {
            document.getElementById(name).value += prefix + suffix
        }
        else {
            document.getElementById(name).value = textbefore + prefix + selected + suffix + textAfter;
        }
    }
    catch (err) { }
}

谢谢 TriniBoy，我会将您的支持标记为答案。

Answer 1

根据您的演示和解释，希望我的要求是正确的。

请参阅代码注释以了解分解。

See demo fiddle here

var PreSuffApp = PreSuffApp || {
selText: "",
selStart: 0,
selEnd: 0,
getSelectedText: function (id) {
    var text = "",
        docSel = document.selection, //For IE
        winSel = window.getSelection,
        P = PreSuffApp,
        textArea = document.getElementById(id);

    if (typeof winSel !== "undefined") {
        text = winSel().toString(); //Grab the current selected text
        if (typeof docSel !== "undefined" && docSel.type === "Text") {
            text = docSel.createRange().text; //Grab the current selected text
        }
    }
    P.selStart = textArea.selectionStart; //Get the start of the selection range
    P.selEnd = textArea.selectionEnd; //Get the end of the selection range
    P.selText = text; //Set the value of the current selected text
},

addTags: function (id, prefix, suffix) {
    try {
        var textArea = document.getElementById(id),
            P = PreSuffApp,
            range = P.selEnd - P.selStart; //Used to calculate the lenght of the selection

        //Check to see if some valuable text is selected
        if (P.selText.trim() !== "") {
            textArea.value = textArea.value.splice(P.selStart, range, prefix + P.selText + suffix); //Call the splice method on your text area value
        } else {
            alert("You've selected a bunch of nothingness");
        }
    } catch (err) {}
}
};

//Extend the string obj to splice the string from a start character index to an end range, like an array.
String.prototype.splice = function (index, rem, s) {
    return (this.slice(0, index) + s + this.slice(index + Math.abs(rem)));
};