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

文章目录

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

前言

程序员在敲代码的过程中都要命名一些字段，但是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>