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

问题描述

我无法使该脚本正常工作，并且已经困扰了我好几天。应该只更改所选单词的文本大小写（由光标突出显示），而不是同时更改所有文本。

这真的是因为我不知道如何正确使用从某处看到的选择线。我在网上看到的任何其他教程都只能具有我需要的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不好，所以请原谅以下代码：（

解决方法

执行这些操作的最佳方法是使用“ 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',alteredText)
            }
            else if (action == 'titlecase'){
                alteredText = toTitleCase(selectedText.toString())
                document.execCommand('insertText',alteredText)
            }
            else if (action == 'capitalcase'){
                alteredText = CapitalCase(selectedText.toString())
                document.execCommand('insertText',alteredText)
            }
            else if (action == 'lowercase'){
                alteredText = lowerCase(selectedText.toString())
                document.execCommand('insertText',alteredText)
            }
            else if (action == 'uppercase'){
                alteredText = upperCase(selectedText.toString())
                document.execCommand('insertText',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>