<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>驼峰、下划线互转</title>
<style>
* {
margin: 0;
padding: 0;
}
html. body {
width: 100%;
height: 100%;
}
textarea {
border: 1px solid #333333;
padding: 10px;
}
button {
padding: 10px 20px;
}
</style>
</head>
<body>
<br>
<div style="text-align: center">
<button onclick="onHump2Underline()">驼峰-->下划线</button>
<button onclick="onUnderline2Hump()">下划线-->驼峰</button>
</div>
<br>
<div style="height: 100%; width: 90%; margin: 0 auto">
<div style="width: 100%; display: inline-block">
<textarea id="target" rows="10" style="height: 100%; width: 100%" placeholder="target"></textarea>
</div>
<div style="width: 100%; display: inline-block">
<textarea id="result" rows="10" style="height: 100%; width: 100%" placeholder="result"></textarea>
</div>
</div>
<script>
var target = document.getElementById('target');
var result = document.getElementById('result');
function onHump2Underline() {
result.value = target.value.toString().replace(/[A-Z]/g, function (ch) {return '_' + ch.toLowerCase()} );
}
function onUnderline2Hump() {
result.value = target.value.toString().replace(/_[a-zA-Z]/g, function (ch) {return ch.replace('_', '').toUpperCase()} );
}
</script>
</body>
</html>
