Javascript 用括号围绕选定文本（如Textmate）_Javascript

Javascript 用括号围绕选定文本（如Textmate）

javascript

Javascript 用括号围绕选定文本（如Textmate）,javascript,Javascript,我想要一个textarea的javascript和HTML，当选中所需的文本时，它用括号、大括号、括号和单引号或双引号包围文本，并键入大括号、引号、括号等的“开始”（左）版本例如，如果文本区域包含“一只快速跳下的棕色狐狸”，并且选择了“棕色狐狸”，然后我按下键盘上的左大括号键，“棕色狐狸”应该被大括号包围，并且被取消选择。paren、单引号/双引号和方括号也是如此该解决方案应适用于最新版本的Chrome、FF和Safari。搜索谷歌，了解如何获取选定的文本范围-您不需要内容，只需要开始位置和

我想要一个

textarea

的javascript和HTML，当选中所需的文本时，它用括号、大括号、括号和单引号或双引号包围文本，并键入大括号、引号、括号等的“开始”（左）版本

例如，如果文本区域包含“一只快速跳下的棕色狐狸”，并且选择了“棕色狐狸”，然后我按下键盘上的左大括号键，“棕色狐狸”应该被大括号包围，并且被取消选择。paren、单引号/双引号和方括号也是如此

该解决方案应适用于最新版本的Chrome、FF和Safari。

搜索谷歌，了解如何获取选定的文本范围-您不需要内容，只需要开始位置和长度。然后使用

substr

将字符串拆分为“before、between和after”部分，插入括号并再次将各部分连接在一起

如果您已经编写了代码并且遇到了实际问题，我很乐意为您提供帮助。同时，请阅读。

查看此完整解决方案：

<html>
    <head>
        <title></title>

        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
        <script type="text/javascript">
            (function($){
                $(document).ready(function(){
                    var keyMap = {
                        '(': ')',
                        '[': ']',
                        '<': '>',
                        '{': '}',
                        '"': '"',
                        '\'': '\''
                    };

                    $('.editor').keypress(function(e){
                        if(this.selectionStart == this.selectionEnd)
                            return true;

                         e.preventDefault();

                         var txtCur = $(this).val();
                         var left = txtCur.substring(0, this.selectionStart);
                         var middle = txtCur.substring(this.selectionStart, this.selectionEnd);
                         var right = txtCur.substring(this.selectionEnd);

                         var cur = String.fromCharCode(e.keyCode);

                         if(keyMap[cur])
                            middle = cur + middle + keyMap[cur];
                         else
                            middle = cur;

                         var pos = (left+middle).length;
                         $(this).val(left+middle+right);
                         this.setSelectionRange(pos,pos);

                    });
                });
            })(jQuery);
        </script
    </head>
    <body>
        <textarea class="editor">abcdefghijklmnopqrstuvwxyz</textarea>
    </body>
</html>


（函数（$）{
$（文档）.ready（函数（）{
var键映射={
'(': ')',
'[': ']',
'',
'{': '}',
'"': '"',
'\'': '\''
};
$（'.editor'）.keypress（函数（e）{
if（this.selectionStart==this.selectionEnd）
返回true；
e、 预防默认值（）；
var txtCur=$（this.val（）；
var left=txtCur.substring（0，this.selectionStart）；
var middle=txtCur.substring（this.selectionStart，this.selectionEnd）；
var right=txtCur.substring（this.selectionEnd）；
var cur=String.fromCharCode（e.keyCode）；
if（键映射[cur]）
middle=cur+middle+keyMap[cur]；
其他的
中间=电流；
变量位置=（左+中）。长度；
$（this.val）（左+中+右）；
此.设置选择范围（pos，pos）；
});
});
})（jQuery）；