我终于上线了第一个工具：英文字母大小写转换 - 文章

theme: vuepress

每天迫不及待的回家更新网站，今天终于把第一个小工具给上线了：英文字母大小写转换。

背景

这个小工具最初是群里的一位朋友提出的，他的网站跨境征程，平时他主要做一些跨境电商相关的工作，据说亚马逊的seo法则里有一条：商品名称首字母大写，他平时总是百度这样的工具用，看到我做在线工具网站，于是就让我给加上，于是这个小工具诞生了。

开发

功能确定

英文字母大小写转换在我看来很简单，只需要使用字符串自带的 toUpperCase()&toLowerCase() 函数就可以了，其次是首字母大小写转换，遍历每一个单词，将首字母大小即可。

大写开发

这个太简单了：

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

小写开发

同样的道理：

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

首字母大写

这个相对于上面两个功能来说，就显得稍微有点复杂，但其实也就是把每一个单词都取出来，然后首字母做一下大写就可以了。

以这个句子为例：this is my first tool.

第一步：查看特征，每个单词以空格分割，但是会有多个空格的存在，所以第一步将所有多个空格替换成仅有一个空格。

// 这里使用了正则表达式
let tmpStr = text.value.replace(/ +/g, ' ')

第二步：调用小写的函数，把所有单词小写

// 这里使用了正则表达式
tmpStr = text.value.toLowerCase();

第三步：遍历每一个字符，如果是一个，则直接设置为大写；如果不是第一个，并且当前字符为空格，则设置下一个字符为大写

let strLen = tmpStr.length;
if (strLen > 0) {
    for (index = 0; index < strLen; index++) {
        if (index == 0) {
            tmpChar = tmpStr.substring(0, 1).toUpperCase();
            postString = tmpStr.substring(1, strLen);
            tmpStr = tmpChar + postString;
        } else {
            tmpChar = tmpStr.substring(index, index + 1);
            if (tmpChar == " " && index < (strLen - 1)) {
                tmpChar = tmpStr.substring(index + 1, index + 2).toUpperCase();
                preString = tmpStr.substring(0, index + 1);
                postString = tmpStr.substring(index + 2, strLen);
                tmpStr = preString + tmpChar + postString;
            }
        }
    }
} 
text.value = tmpStr

至此，转换功能开发完成。接下来制作一个一键复制的功能。

一键复制

一键复制之前使用的方法是一对组合函数：

dom.select()
document.execCommand("copy");

先选中文本框，然后复制。但是今天我在使用时发现这个函数提示过期了，作为一个追求新事物的年轻人，我肯定不会使用这种过期的函数（虽然还可以用），于是稍微百度了一下，发现最新的复制方式是使用navigator.clipboard.writeText(str),这种方式，所以变得更加简单了。

function toCopy() {
    navigator.clipboard.writeText(text.value)
}

源码

最后加上了一点小细节，增加了提示，完整代码如下：

<template>
    <div class="bg-white">
        <section class="bg-gray-100">
            <div class="container px-4 mx-auto">
                <div class="md:flex md:-mx-4 md:items-center py-8">
                    <div class="md:w-1/2 px-4">
                        <p class="text-2xl text-black">英文大小写在线转换</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="w-full container px-4 mx-auto py-12">
            <div class="relative">
                <textarea v-model="text" autofocus
                    class="text-gray-600 w-full bg-gray-100 boder-left boder-bottom outline-none p-3"
                    rows="8"></textarea>
                <span class="absolute px-2 py-1 text-xs text-white bg-blue-500 rounded right-4 bottom-6">{{ text.length
                }}</span>
            </div>
            <div class="flex flex-row flex-wrap">
                <button
                    class="flex m-2 py-2 px-4 font-medium tracking-widest text-white uppercase bg-black shadow-lg focus:outline-none hover:bg-gray-900 hover:shadow-none"
                    @click="toUpperCaseAll()">
                    单词大写
                </button>
                <button
                    class="flex m-2 py-2 px-4 font-medium tracking-widest text-white uppercase bg-black shadow-lg focus:outline-none hover:bg-gray-900 hover:shadow-none"
                    @click="toLowerCaseAll()">
                    单词小写
                </button>
                <button class=" flex m-2 py-2 px-4 font-medium tracking-widest text-white uppercase bg-black shadow-lg
                focus:outline-none hover:bg-gray-900 hover:shadow-none" @click="toFirstLetterCase()">
                    首字母大写
                </button>
                <button class=" flex m-2 py-2 px-4 font-medium tracking-widest text-white uppercase bg-black shadow-lg
                focus:outline-none hover:bg-gray-900 hover:shadow-none" @click="toCopy()">
                    {{ copyText }}
                </button>
            </div>
        </section>
        <section class="bg-white w-full container mx-auto  px-4 py-6">

            <article class="prose lg:prose-xl" style="max-width: none;">
                <h4>使用说明：</h4>
                <blockquote>
                    <p>有做跨境电商的小伙伴说需要一款英文大小写转换的工具，说白了就是英文首字母转大写，于是就利用JavaScript写下了这个工具。</p>
                </blockquote>
                <ul>
                    <li>转大写：全部字母转大写。</li>
                    <li>转小写：全部字母转小写。</li>
                    <li>首字母大写：英文句子中每个单词的第一个字母转成大写，其它字母转成小写。例如：this is my girl转换后为：This Is My Girl</li>
                </ul>
            </article>
        </section>
    </div>
</template>
<script setup lang="ts">

const text = ref("")
const copyText = ref("一键复制")
const { $toast } = useNuxtApp()


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

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

function toFirstLetterCase() {
    text.value = text.value.replace(/ +/g, ' ')
    let index = 0;
    let tmpStr = "";
    let tmpChar = "";
    let preString = "";
    let postString = "";
    let strLen = 0;
    tmpStr = text.value.toLowerCase();
    strLen = tmpStr.length;
    if (strLen > 0) {
        for (index = 0; index < strLen; index++) {
            if (index == 0) {
                tmpChar = tmpStr.substring(0, 1).toUpperCase();
                postString = tmpStr.substring(1, strLen);
                tmpStr = tmpChar + postString;
            } else {
                tmpChar = tmpStr.substring(index, index + 1);
                if (tmpChar == " " && index < (strLen - 1)) {
                    tmpChar = tmpStr.substring(index + 1, index + 2).toUpperCase();
                    preString = tmpStr.substring(0, index + 1);
                    postString = tmpStr.substring(index + 2, strLen);
                    tmpStr = preString + tmpChar + postString;
                }
            }
        }
    }
    text.value = tmpStr;
}

function toCopy() {
    navigator.clipboard.writeText(text.value)
    copyText.value = "复制完成"
    $toast.success("复制完成")
    window.setTimeout(function () {
        copyText.value = "一键复制"
    }, 800)

}


</script>