jQuery字母大小写转换

原创于 2025-02-14 09:14:15 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

jQuery字母大小写转换，将输入的文本转换为大写或小写或字母首位大写，在不使用CSS的情况下更改文本字母大小写很有用，尤其是一些英文外贸网站，这个功能很实用。

HTML代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery字母大小写转换</title>
<script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.js"></script>
</head>
<body>
字母：<input type="text" name="title" id="title" style="width: 350px"> <span id="toUpperLowerCase">Aa</span> | <span id="toUpperCase">AA</span> | <span id="toLowerCase">aa</span>
<script type="application/javascript">
$(document).ready(function(){
    $("#toUpperCase").click(function(){
        $("#title").val($("#title").val().toUpperCase());
    });
    $("#toLowerCase").click(function(){
        $("#title").val($("#title").val().toLowerCase());
    });
    $("#toUpperLowerCase").click(function(){
        var str = $("#title").val();
        var capitalizedStr = str.replace(/\b[a-z]/g, function(char) {
            return char.toUpperCase();
        });
        $("#title").val(capitalizedStr);
    });
});
</script>
</body>
</html>