如何转换所选文本文本区域中的文本大小写？

Question

我无法让这个脚本工作，我已经坚持了好几天了。它应该更改文本大小写 仅所选单词（光标突出显示） 而不是同时更改所有文本。

真的是不知道怎么正确使用从哪里看到的选择线。我在网上看到的任何其他教程要么只有我需要的 4 个功能中的 1 个，要么拥有所有功能，但会转换所有文本，而不仅仅是选定的文本。

我当前的脚本如下所示：

        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>

如何转换所选文本文本区域中的文本大小写？

How to convert text case in textarea of selected text?

html

javascript

textarea