帮我写一个html功能如下有一个文本输入框还有一个下拉选项框拉下选项框有大驼峰写法小驼峰写法蛇形写法连字符写法常量名全大写全小写空格全大写空格全小写空格大驼峰通过选中这些方式将上面的输入款内容进行响应的转换输出
<!DOCTYPE html>
<html>
<head>
<title>命名方式转换器</title>
</head>
<body>
<label for="input">输入内容：</label>
<input type="text" id="input" name="input"><br><br>
<label for="options">选择转换方式：</label>
<select id="options" name="options">
<option value="upper-camel">大驼峰写法</option>
<option value="lower-camel">小驼峰写法</option>
<option value="snake">蛇形写法</option>
<option value="kebab">连字符写法</option>
<option value="constant">常量名</option>
<option value="upper">全大写</option>
<option value="lower">全小写</option>
<option value="space-upper">空格全大写</option>
<option value="space-lower">空格全小写</option>
<option value="space-camel">空格大驼峰</option>
</select><br><br>
<button onclick="convert()">转换</button><br><br>
<label for="output">输出内容：</label>
<input type="text" id="output" name="output" readonly>
<script>
function convert() {
let input = document.getElementById("input").value;
let options = document.getElementById("options").value;
let output = document.getElementById("output");
switch(options) {
case "upper-camel":
output.value = input.replace(/(?:^\w|[A-Z]|\b\w)/g, function(letter, index) {
return index == 0 ? letter.toUpperCase() : letter.toLowerCase();
}).replace(/\s+/g, '');
break;
case "lower-camel":
output.value = input.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, function(match, group1) {
return group1.toUpperCase();
});
break;
case "snake":
output.value = input.toLowerCase().replace(/\s+/g, '_');
break;
case "kebab":
output.value = input.toLowerCase().replace(/\s+/g, '-');
break;
case "constant":
output.value = input.toUpperCase().replace(/\s+/g, '_');
break;
case "upper":
output.value = input.toUpperCase();
break;
case "lower":
output.value = input.toLowerCase();
break;
case "space-upper":
output.value = input.toUpperCase().replace(/\S+/g, function(match) {
return ' ' + match;
}).trim();
break;
case "space-lower":
output.value = input.toLowerCase().replace(/\S+/g, function(match) {
return ' ' + match;
}).trim();
break;
case "space-camel":
output.value = input.toLowerCase().replace(/\s+/g, ' ').replace(/[^a-zA-Z0-9]+(.)/g, function(match, group1) {
return group1.toUpperCase();
}).replace(/(?:^\w|[A-Z]|\b\w)/g, function(letter, index) {
return index == 0 ? letter.toUpperCase() : letter.toLowerCase();
}).replace(/\s+/g, '');
break;
}
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/blaX 著作权归作者所有。请勿转载和采集!