Question

我想要textarea的javascript和HTML，当选择了所需的文字时，它会围绕包含括号，大括号，括号和单引号或双引号的文本，并且有一个类型为'开头'（左））括号，引号，paren等版本。

例如，如果textarea包含'A quick brown fox jumped'，并选择'brown fox'，然后我按下键盘上的左括号键，'brown fox'应该被括号包围，并且不被选中。对于parens，单/双引号和括号也是如此。

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

Answer 1

在Google上搜索如何获取所选文字范围 - 您不需要内容，只需要开始位置和长度。然后使用substr将字符串分解为“之前，之间和之后”部分，插入括号并再次将这些部分连接在一起。

如果您已编写代码并遇到实际问题，我们将很乐意为您提供帮助。同时，请阅读this blog post denouncing the kind of attitude you're showing here。

Answer 2

查看完整的解决方案：

<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>

用括号括起所选文本（如Textmate）

2 个答案: