How to convert text case in textarea of selected text?

Question

I cannot make this script work and I'm stuck with this for days now. It's supposed to change the text case only of the selected words (highlighted by cursor) and not all of the texts at the same time.

It's really because I don't know how to properly use the selection line that I saw from somewhere. Any other tutorial I see online will either have only 1 of the 4 functions I need or they will have it all but will convert all text and not the selected only.

My current script looks like this:

        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>

I'm not good with javascript, so please excuse the code below :(

Answer 1

Best way for these operations is to use "execCommand()"

here I have used execCommand("insertText", false, <textToReplaceWith>) to simply replace selection with desired text.

I have commented unwanted code as it was resulting in errors

I presume this would fix the issue.

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>