起因

最近有做跨境电商的朋友想要一个一键大小写转换的工具,具体来说就是把一句英语的所有单词首字母大写,这还不是有手就行?于是我分分钟就写了一个一键把所有单词的所有字母转换成大写和一个一键把所有单词的字母转换成小写的工具,简简单单!然而,我卡在了所有单词的首字母转大写这里。好吧,我收回我之前说的话。这个工具需要算法了。

核心

先说说怎么实现全部字母转大写和小写吧,基本上所有的语言都支持一键转大写和小写,在JavaScript中,方法为:String.toUpperCase()String.toLowerCase(),也就是说放一个文本域,获取到文本域的值,然后使用上面两个方法来赋值就可以了。首字母转大写的话就在于如何让程序识别出来第一个字母,然后转大写。

分析

首先来看这个句子:

this is my computer

需要转换的字母分别为:t、i、m和c,t我们可以直接转换第一个字母,那么我们就需要分析如何获取到i、m和c,他们都有一个共同的特点,就是前面有个空格,所以我们就可以从这一点下手,找空格。只要找到空格,就可以设置空格的后面一个字母为大小。好了,分析完成,开始写算法。

算法

根据空格,我想到了两种算法,一种是遍历所有字母,发现空格后设置空格的后一位为大写。本例中也是用这种算法;另外一种是分割法,不过没有具体实现。

遍历法

我们拿到文本域中的字符串后,首先全部转换成小写,然后使用for循环一个一个字母的遍历,当i==0的时候,就是第一个字母,我们直接设置成大写,之后在当前字符为空格时,设置后 i+1 的字母为大写。这样功能就完成了。简简单单!

分割法

依然是拿到文本域的字符串后全部转换成小写,然后使用split把字符串通过空格分割成数组,随后遍历数组,遍历时把每一个元素的第一个字母转换成大写,组装成一个新的字符串,就可以了。不过我这次没有使用这种方法,有兴趣的朋友可以尝试一下看看有没有我想到的坑。

其他功能

除此以外,我还增加了一键复制的功能,原理就是先选择所有的文本,就是按着鼠标左键在文字上面划过,这些字会有一个蓝色的背景的这种状态,然后使用命令 document.execCommand("copy") 来进行复制。

代码

最后代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英文单词大小写转换</title>
</head>

<body>
    <textarea id="content" cols="30" rows="10"></textarea>
    <br>
    <button onclick="toUpperCaseAll()">转大写</button>
    <button onclick="toLowerCaseAll()">转小写</button>
    <button onclick="toFirstLetterUpperCase()">首字母大写</button>
    <button onclick="toCopy(this)">一键复制</button>


    <script>
        let content = document.getElementById("content")

        function toUpperCaseAll() {
            content.value = content.value.toUpperCase()
        }

        function toLowerCaseAll() {
            content.value = content.value.toLowerCase()
        }

        // this is my computer
        function toFirstLetterUpperCase() {
            content.value = content.value.toLowerCase()
            let contentValue = content.value
            let contentLength = content.value.length
            console.log(contentValue)
            console.log(contentLength)
            var index = 0
            var tempContent = ""

            // 第一次循环,tempContent = This is my computer
            // 第二次循环,tempContent = This is my computer 错误在于前缀用错了,应该用修改过的tempContent,而不是原来的content Value

            for (index; index < contentLength - 1; index++) {
                if (index == 0) {
                    tempContent = contentValue.substring(index, index + 1).toUpperCase() + contentValue.substring(index + 1, contentLength)
                } else {
                    if (contentValue.substring(index, index + 1) == " ") {
                        let contentPre = tempContent.substring(0, index + 1) // This 
                        let upperCaseLetter = contentValue.substring(index + 1, index + 2).toUpperCase() // I
                        let contentLast = contentValue.substring(index + 2, contentLength) //s my computer
                        tempContent = contentPre + upperCaseLetter + contentLast

                    }
                }
            }
            content.value = tempContent
        }

        function toCopy(e) {
            content.select()
            document.execCommand("copy")
            e.innerText = "复制完成"
            window.setInterval(function() {
                e.innerText = "一键复制"
            }, 800)
        }
    </script>

</body>

</html>

演示

英文单词大小写转换

您可能感兴趣的: