234234234

驼峰、下划线互转 网页版

 

 

<!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>

 

posted @ 2022-07-11 13:38  ukeepgoing  阅读(87)  评论(0)    收藏  举报
23423423423