如何在选定文本的文本区域转换文本大小写？

Question

我不能让这个脚本起作用，我已经坚持了好几天了。它应该只更改选定单词(由光标突出显示)的文本大小写，而不是同时更改所有文本。

这真的是因为我不知道如何正确地使用我从某个地方看到的选择线。我在网上看到的任何其他教程要么只有我需要的4个函数中的一个，要么它们将拥有所有的功能，但是会转换所有的文本，而不是只转换选定的。

我当前的脚本如下：

​

        var stringbox = document.getElementById('textarea2')

        $(document).ready(function () {
           var selection;
        $(textarea2).select(function () {
          selection = window.getSelection().toString();
        });
    
        function convertstring(textarea, action){
            if (action == 'sentencecase'){
                textarea.value = sentenceCase(textarea.value)
            }
            else if (action == 'titlecase'){
                textarea.value = toTitleCase(textarea.value)
            }
            else if (action == 'capitalcase'){
                textarea.value = CapitalCase(textarea.value)
            }
            else if (action == 'lowercase'){
                textarea.value = lowerCase(textarea.value)
            }
            else if (action == 'uppercase'){
                textarea.value = upperCase(textarea.value)
            }
            return false
        }

        function sentenceCase(str){
            var str = str.toLowerCase().replace(/\si\s/g, ' I ');
            str = str.charAt(0).toUpperCase() + str.slice(1);
            return str
        }

        function toTitleCase(str){
            var smallWords = /^(a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|vs?\.?|via)$/i;
            var str = str.toLowerCase()
            return str.replace(/[A-Za-z0-9\u00C0-\u00FF]+[^\s-]*/g, function(match, index, title){
            if (index > 0 && index + match.length !== title.length &&
              match.search(smallWords) > -1 && title.charAt(index - 2) !== ":" &&
              (title.charAt(index + match.length) !== '-' || title.charAt(index - 1) === '-') &&
              title.charAt(index - 1).search(/[^\s-]/) < 0) {
              return match.toLowerCase();
            }

            if (match.substr(1).search(/[A-Z]|\../) > -1) {
              return match;
            }

            return match.charAt(0).toUpperCase() + match.substr(1);
          });
        };

        function CapitalCase(str){
          return str.toLowerCase().split(' ').map(function(word) {
            return (word.charAt(0).toUpperCase() + word.slice(1));
          }).join(' ');
        }

        function lowerCase(str){
          return str.toLowerCase();
        }

        function upperCase(str){
          return str.toUpperCase();
        }

<textarea id="textarea2" spellcheck="true" placeholder="Use as your notepad.."></textarea>

<button title="Convert to Title Case" class="sbtn" onclick="return convertstring(stringbox, 'titlecase')">Title Case</button>

<button title="Convert to Sentence Case" class="sbtn" onclick="return convertstring(stringbox, 'sentencecase')">Sentence Case</button>

<button title="Convert to Upper Case" class="sbtn" onclick="return convertstring(stringbox, 'uppercase')">Upper Case</button>

<button title="Convert to Lower Case" class="sbtn" onclick="return convertstring(stringbox, 'lowercase')" string.="" the="">Lower Case</button>

​

我对javascript不太熟悉，所以请原谅下面的代码：

Answer 1

这些操作的最佳方法是使用"execCommand()“

在这里，我使用execCommand("insertText", false, <textToReplaceWith>)简单地将选择替换为所需的文本。

我已经评论了一些不必要的代码，因为它会导致错误。

我想这会解决这个问题。

​

var stringbox = document.getElementById('textarea2')

        //$(document).ready(function () {
        //   var selection;
        //$(textarea2).select(function () {
        //  selection = window.getSelection().toString();
        //});
    
        function convertstring(textarea, action){
        var selectedText = ''; 

                // window.getSelection 
                if (window.getSelection) { 
                    selectedText = window.getSelection(); 
                } 
                // document.getSelection 
                else if (document.getSelection) { 
                    selectedText = document.getSelection(); 
                } 
                // document.selection 
                else if (document.selection) { 
                    selectedText = 
                    document.selection.createRange().text; 
                } else return;
        
            if (action == 'sentencecase'){
                alteredText = sentenceCase(selectedText.toString())
                document.execCommand('insertText', false, alteredText)
            }
            else if (action == 'titlecase'){
                alteredText = toTitleCase(selectedText.toString())
                document.execCommand('insertText', false, alteredText)
            }
            else if (action == 'capitalcase'){
                alteredText = CapitalCase(selectedText.toString())
                document.execCommand('insertText', false, alteredText)
            }
            else if (action == 'lowercase'){
                alteredText = lowerCase(selectedText.toString())
                document.execCommand('insertText', false, alteredText)
            }
            else if (action == 'uppercase'){
                alteredText = upperCase(selectedText.toString())
                document.execCommand('insertText', false, alteredText)
            }
            return false
        }

        function sentenceCase(str){
            var str = str.toLowerCase().replace(/\si\s/g, ' I ');
            str = str.charAt(0).toUpperCase() + str.slice(1);
            return str
        }

        function toTitleCase(str){
            var smallWords = /^(a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|vs?\.?|via)$/i;
            var str = str.toLowerCase()
            return str.replace(/[A-Za-z0-9\u00C0-\u00FF]+[^\s-]*/g, function(match, index, title){
            if (index > 0 && index + match.length !== title.length &&
              match.search(smallWords) > -1 && title.charAt(index - 2) !== ":" &&
              (title.charAt(index + match.length) !== '-' || title.charAt(index - 1) === '-') &&
              title.charAt(index - 1).search(/[^\s-]/) < 0) {
              return match.toLowerCase();
            }

            if (match.substr(1).search(/[A-Z]|\../) > -1) {
              return match;
            }

            return match.charAt(0).toUpperCase() + match.substr(1);
          });
        };

        function CapitalCase(str){
          return str.toLowerCase().split(' ').map(function(word) {
            return (word.charAt(0).toUpperCase() + word.slice(1));
          }).join(' ');
        }

        function lowerCase(str){
          return str.toLowerCase();
        }

        function upperCase(str){
          return str.toUpperCase();
        }

<textarea id="textarea2" spellcheck="true" placeholder="Use as your notepad.."></textarea>

<button title="Convert to Title Case" class="sbtn" onclick="convertstring(stringbox, 'titlecase')">Title Case</button>

<button title="Convert to Sentence Case" class="sbtn" onclick="convertstring(stringbox, 'sentencecase')">Sentence Case</button>

<button title="Convert to Upper Case" class="sbtn" onclick="convertstring(stringbox, 'uppercase')">Upper Case</button>

<button title="Convert to Lower Case" class="sbtn" onclick="convertstring(stringbox, 'lowercase')" string.="" the="">Lower Case</button>

​