驼峰下划线转换工具

最新推荐文章于 2024-08-29 21:55:00 发布

王家五哥

最新推荐文章于 2024-08-29 21:55:00 发布

阅读量1.1k

点赞数 2

分类专栏： js小工具

本文链接：https://blog.csdn.net/qq_36521848/article/details/113184126

版权

js小工具专栏收录该内容

32 篇文章 0 订阅

订阅专栏

驼峰下划线转换工具：

作用：将驼峰命名和下划线命名相互转换

效果图：

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下划线与驼峰相互转换工具类</title>
		<style type="text/css">
			#bodyBox {
				width: auto 10%;
				margin-top: 10px;
			}
			.textBox {
				height: 100px;
				width: 45%;
			}
		</style>
	</head>
	<body>
		<div>
			<h3>下划线与驼峰相互转换工具类</h3>
		</div>
		<div id="bodyBox">
			下划线转驼峰<br>
			<textarea autofocus="autofocus" class="textBox" id="toHumpId" onblur="tranToHump()"></textarea><br>
			转换后:<br>
			<textarea class="textBox" id="toHumpIdAfter"></textarea><br><br>
			驼峰转下划线<br>
			<textarea autofocus="autofocus" class="textBox" id="toLineId" onblur="tranToLine()"></textarea><br>
			转换后:<br>
			<textarea class="textBox" id="toLineIdAfter"></textarea><br>
		</div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.0/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/**
		 * 失去焦点转换_下划线转换驼峰
		 */
		function tranToHump() {
			$("#toHumpIdAfter").val(toHump($("#toHumpId").val().trim().toLocaleLowerCase()));
		}

		/**
		 * 失去焦点转换_驼峰转换下划线
		 */
		function tranToLine() {
			$("#toLineIdAfter").val((toLine($("#toLineId").val().trim())).toLocaleUpperCase());
		}

		/**
		 * 下划线转换驼峰
		 * @param {Object} name
		 */
		function toHump(name) {
			return name.replace(/\_(\w)/g, function(all, letter) {
				return letter.toUpperCase();
			});
		}

		/**
		 * 驼峰转换下划线
		 * @param {Object} name
		 */
		function toLine(name) {
			return name.replace(/([A-Z])/g, "_$1").toLowerCase();
		}
	</script>
</html>