Как преобразовать регистр текста в текстовой области выделенного текста?

ProgramBox

Как преобразовать регистр текста в текстовой области выделенного текста?

Post author:admin
Запись опубликована:16 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #textarea

#javascript #HTML #текстовая область

Вопрос:

Я не могу заставить этот скрипт работать, и я застрял с этим на несколько дней. Предполагается изменить регистр текста только для выделенных слов (выделенных курсором), а не для всех текстов одновременно.

На самом деле это потому, что я не знаю, как правильно использовать строку выделения, которую я где-то видел. Любой другой учебник, который я вижу онлайн, либо будет иметь только 1 из 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(/sis/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-9u00C0-u00FF] [^s-]*/g, function(match, index, title){
            if (index > 0 amp;amp; index   match.length !== title.length amp;amp;
              match.search(smallWords) > -1 amp;amp; title.charAt(index - 2) !== ":" amp;amp;
              (title.charAt(index   match.length) !== '-' || title.charAt(index - 1) === '-') amp;amp;
              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, поэтому, пожалуйста, извините за приведенный ниже код: (

Ответ №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(/sis/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-9u00C0-u00FF] [^s-]*/g, function(match, index, title){
            if (index > 0 amp;amp; index   match.length !== title.length amp;amp;
              match.search(smallWords) > -1 amp;amp; title.charAt(index - 2) !== ":" amp;amp;
              (title.charAt(index   match.length) !== '-' || title.charAt(index - 1) === '-') amp;amp;
              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>