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

作者

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

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

阿吉特·埃帕卡亚拉(Ajeet eppakayala)

这些操作的最佳方法是使用“ 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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在文本区域中显示选定的选项

如何在文本区域中显示所选选项的文本

如何在文本区域中更改字体颜色

仅删除文本区域中的选定文本

编辑文本区域中的选定文本,然后将其打印回文本区域

在Ionic输入文本区域中更改字体大小

如何排列在下方的文本区域中的文本?

如何存储在未知文本区域中输入的文本?

如何更改文本区域中文本的颜色

如何使用 React Hooks 更改文本区域中的文本?

如何在我最后插入文本的文本区域中设置光标位置?

如何在Java应用程序的文本区域中显示html格式的文本?

如何在Oracle文本中保留相同的大小写?

实时渲染文本区域中的文本

在文本区域中左对齐文本

如何更改文本区域大小的位置?

在控制台中显示多个详细信息,但不在文本区域中显示。如何在文本区域中显示特定行

如何在文本区域中设置特定单词的样式

如何在 Django 管理 UI 的文本区域中保留空行?

设置值后如何在HTML文本区域中使撤消工作?

如何在html文本区域中更改输入法(例如,外语)

如何在一个文本区域中包含3个不同值的总和

如何在文本区域中使用所有td空间?

通过POST传递时如何在文本区域中保留换行符?

如何在段落中包含从文本区域中获取的换行符?

如何在文本区域中显示数据库中的多行

当用户按“输入”键时,如何在文本区域中自动添加 <br>?

如何防止用户仅在文本区域中输入空格

如何滚动到文本区域中的光标位置?