web前端字段大小写下划线转换工具

news2024/9/22 21:00:04

文章目录

前言
一、如何使用？
二、相关代码
总结

前言

程序员在敲代码的过程中都要命名一些字段，但是Java语言对字段的命名规范和sql命名规范不一样，如下图所示，这种机械性的转换工作很劳神费力，为了省点劲写了一个web小工具，个人感觉还挺好用的，后续大家可以据此代码个性化改造。

一、如何使用？

用浏览器打开文件即可使用，界面简洁明了，如图所示：

在这里插入图片描述

二、相关代码

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字段转换工具</title>
</head>
 
<body>
<div class="handle">
	<div class="handle-area">
		<textarea id="material" row="100" cols="10" placeholder='输入字段'></textarea>
		<div>
			<input id="button4" type="button" value="大小写➡下划线"></input>
			<input id="button2" type="button" value="下划线➡大小写"></input>
			<input id="button1" type="button" value="清空"></input>
		</div>
	</div>
	<div class="handle-area">
		<textarea id="product" row="100" cols="10" placeholder='输出字段'></textarea>
		<input id="button3" type="button" value="复制"></input>
	</div>
</div>
</body>
<script type="text/javascript">

document.getElementById('button1').onclick = function(){
	document.getElementById("material").value = "";
	document.getElementById("product").value = "";
};

document.getElementById('button2').onclick = function(){
	var m = "_" + document.getElementById('material').value;
	replaceCharAtIndex(m);
};

function replaceCharAtIndex(m) {
	console.log(m);
	let charToCheck = "_";
	if(m.indexOf(charToCheck) !== -1){
		let caseChar = m.indexOf(charToCheck);// 获取"_"的索引
		var charArray = m.split("");// 将字符串转换为数组
		charArray[caseChar + 1] = charArray[caseChar + 1].toUpperCase();// 将"_"右边字母换成大写字母
		var leftStr = charArray.join("").substring(0, caseChar);
		var rightStr = charArray.join("").substring(caseChar + 1);
		
		return replaceCharAtIndex(leftStr + rightStr);
	}else {
		console.log("不包含下划线");
		// 拼接字符串
		document.getElementById('product').value = m;
	};
};

document.getElementById('button4').onclick = function(){
	var m = document.getElementById('material').value;
	var lower0 = m.charAt(0).toLowerCase() + m.slice(1);
	// 拼接字符串
	document.getElementById('product').value = convertUpperCaseToUnderscore(lower0);
};

function convertUpperCaseToUnderscore(str) {
    return str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
};

document.getElementById('button3').onclick = function(){
	var p = document.getElementById("product").value;
    navigator.clipboard.writeText(p);
	// document.getElementById("product").select();
	// document.execCommand("copy");
};

</script>
<style>

.handle{
	display: flex;
	justify-content: space-evenly;
}
.handle-area{
	position: relative;
	width: 100%;
}
.handle-area div{
    display: flex;
    flex-direction: row-reverse;
}
textarea{
	width: 99.3%;
	height: 100px;
}
div input{
	width: 120px;
    margin: 10px;
}
</style>
</html>