如何利用html+js写一个大小写字母互转工具

CodeAE

创建基本的HTML结构。
添加jQuery库。
编写JavaScript/jQuery代码来处理文本转换。

下面是一个完整的示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>字母大小写转换工具</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // 将输入框中的文本转换为大写
  $('#to-upper').click(function() {
    var text = $('#input-text').val();
    $('#input-text').val(text.toUpperCase());
  });

  // 将输入框中的文本转换为小写
  $('#to-lower').click(function() {
    var text = $('#input-text').val();
    $('#input-text').val(text.toLowerCase());
  });

  // 将输入框中的每个单词首字母转换为大写
  $('#to-capital').click(function() {
    var text = $('#input-text').val();
    $('#input-text').val(text.replace(/\b\w/g, function(l) { return l.toUpperCase(); }));
  });

  // 交换输入框中每个字符的大小写
  $('#swap-case').click(function() {
    var text = $('#input-text').val();
    $('#input-text').val(text.split('').map(function(char) {
      return char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase();
    }).join(''));
  });
});
</script>
<style>
body { font-family: Arial, sans-serif; }
textarea { width: 100%; height: 100px; margin-bottom: 10px; }
button { margin-right: 5px; padding: 5px 10px; }
</style>
</head>
<body>

<h1>字母大小写转换工具</h1>

<textarea id="input-text" placeholder="在这里输入文字..."></textarea><br/>

<button id="to-upper">全部转为大写</button>
<button id="to-lower">全部转为小写</button>
<button id="to-capital">首字母大写</button>
<button id="swap-case">大小写互换</button>

</body>
</html>

这个HTML页面包含了一个<textarea>供用户输入文本，以及四个按钮，分别用于执行不同的文本转换操作。当点击相应的按钮时，jQuery会读取<textarea>中的值，根据所选的操作进行处理，然后将处理后的文本重新设置回<textarea>中。

to-upper 按钮将所有字母转换为大写。
to-lower 按钮将所有字母转换为小写。
to-capital 按钮将每个单词的首字母转换为大写。
swap-case 按钮将每个字母的大小写状态互换。

确保你的浏览器支持jQuery并且可以访问到jQuery库。如果你在本地开发，请下载jQuery文件并引用本地路径，或者确保你有互联网连接以从CDN加载jQuery。

当然作为高级开发者的你也可以给予适当的修饰，让项目更加完美且人性化，以下为修改后的案例可以做为参考，小编就不再过多赘述！
案例：https://tool.openagp.com/tool/pinyin/index.html

[Html/CSS] 如何利用html+js写一个大小写字母互转工具

CodeAE LV9