大写文本区域中的文本选择答案

【问题标题】：Upper case a selection of text in a textarea大写文本区域中的文本选择
【发布时间】：2015-06-03 16:30:46
【问题描述】：

我在尝试运行以下代码时收到 undefined is not a function 错误：

$(document).ready(function() {
    $("#textarea").select(function() {
        var selection = window.getSelection();
        $("#upper").click(function() {
            // alert(selection);
            var upper = selection.toUpperCase();
            var text = $("#textarea").text();
            $("#textarea").html(text.replace(selection, upper));
        });
    }); 
});

我正在尝试从 textarea 中选择文本，然后单击一个按钮使选择变为大写。这是完整代码的JSFiddle。

【问题讨论】：

jsfiddle 和这里的代码很不一样——而且还有语法错误.. 是什么？
抱歉，链接已更新。
您的第一个链接实际上很少损坏。您现在有嵌套的事件处理程序（通常是一个非常糟糕的信号）。

标签： javascript jquery uppercase getselection

【解决方案1】：

getSelection 返回一个对象。你需要拨打toString()就可以了。

$(document).ready(function () {
    var selection;
    $("#textarea").select(function () {
        selection = window.getSelection().toString();
    });
    $("#upper").click(function () {
        if (selection) {
            var upper = selection.toUpperCase();
            var text = $("#textarea").text();
            $("#textarea").html(text.replace(selection, upper));
        }
    });
});

JSFiddle：http://jsfiddle.net/TrueBlueAussie/8syb2d8j/4/

注意事项：

您的事件处理程序是嵌套的（通常是个坏主意）
在尝试大写之前，我添加了一个检查以确保有一个选择。
因为，潜在地，您突出显示的文本可能会出现多个，使用replace 实际上不是一个很好的解决方案。尝试突出显示第二个i，看看我的意思。您应该使用选择对象的属性来计算出所选字符串的确切部分，

在浏览了便携式解决方案后，我发现jQuery TextRange plugin，基于the demo 足以解决这个问题。

【讨论】：

谢谢。嵌套是因为我认为我的错误与变量范围有关！
@mpdc：不，只需将变量移回一级。请注意我在最后提到的问题。您可能需要重新考虑如何做到这一点。 :)
我在这里查看第二个答案以获得灵感：stackoverflow.com/questions/17836488/… :) 谢谢。
这是一个很好的例子。使用getSelection()提供的range属性
刚刚浏览了“正确”操作的选项（即使用选择范围），那里有很多噪音。浏览器兼容性将成为问题。