版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hbtj_1216/article/details/85075478
效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mybatis SQL Format</title>
<style>
.container {
margin: 60px 60px;
display: inline-block;
}
.inner-container {
margin: 0px 10px;
}
.text-style {
width: 600px;
height: 800px;
font-size: 16px;
font-family: "Dejavu Sans Mono";
}
.float {
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="inner-container float">
<textarea class="text-style" id="inputTextarea" onkeydown="tab(this)"></textarea>
</div>
<div class="float">
<button id="left2Right">左转右</button>
<button id="right2Left">右转左</button>
</div>
<div class="inner-container float">
<textarea class="text-style" id="outputTextarea" onkeydown="tab(this)"></textarea>
</div>
</div>
</body>
<script>
function tab(obj) {
if (event.keyCode == 9) {
obj.value = obj.value + " "; // 跳几格由你自已决定
event.returnValue = false;
}
}
String.prototype.trim = function () {
return this.replace(/(^\s*)|(\s*$)/g, "");
}
String.prototype.ltrim = function () {
return this.replace(/(^\s*)/g, "");
}
String.prototype.rtrim = function () {
return this.replace(/(\s*$)/g, "");
}
var inputTextarea = document.getElementById('inputTextarea');
var outputTextarea = document.getElementById('outputTextarea');
// left2Right点击事件
document.getElementById('left2Right').onclick = function () {
// 获取输入的文本
var inputText = inputTextarea.value;
inputText = new String(inputText);
var len = inputText.length;
var lineNo = 1;
var lineValue = '';
var end = 0;
var count = 0;
// 数组
var arr = new Array();
var maxLen = 0;
while (end < len && count < 20) {
// 计算每行的字符数
end = inputText.indexOf('\n');
if (end === -1 && inputText.length !== 0) {
lineValue = inputText;
if (lineValue !== null && lineValue !== '') {
arr[lineNo] = lineValue;
if (lineValue.length > maxLen) {
maxLen = lineValue.length;
}
}
break;
} else {
lineValue = inputText.substring(0, end);
if (lineValue !== null && lineValue !== '') {
arr[lineNo] = lineValue;
if (lineValue.length > maxLen) {
maxLen = lineValue.length;
}
}
if (end < len) {
inputText = inputText.substring(end + 1, len);
len = inputText.length;
end = 0;
lineNo++;
}
count++;
}
}
// 打印到右边
var rightSpace = '';
outputTextarea.value = '"\<script\>",\n';
for (var i = 1; i < arr.length; i++) {
for (var n = 0; n < maxLen - arr[i].length; n++) {
rightSpace = rightSpace + ' ';
}
outputTextarea.value = outputTextarea.value + '" ' + arr[i] + rightSpace + ' ",\n';
rightSpace = '';
}
outputTextarea.value = outputTextarea.value + '"\</script\>"';
}
// right2Left点击事件
document.getElementById('right2Left').onclick = function () {
var outputText = new String(outputTextarea.value);
if (outputText !== '') {
var len = outputText.length;
var lineNo = 1;
var lineValue = '';
var end = 0;
var count = 0;
// 数组
var arr = new Array();
while (end < len && count < 20) {
// 计算每行的字符数
end = outputText.indexOf('\n');
if (end === -1 && outputText.length !== 0) {
lineValue = outputText;
if (lineValue !== null && lineValue !== '') {
arr[lineNo] = lineValue;
}
break;
} else {
lineValue = outputText.substring(0, end);
if (lineValue !== null && lineValue !== '') {
arr[lineNo] = lineValue;
}
if (end < len) {
outputText = outputText.substring(end + 1, len);
len = outputText.length;
end = 0;
lineNo++;
}
count++;
}
}
// 去掉每行
for (var i = 1; i < arr.length; i++) {
var l = arr[i].indexOf('"') + 5;
var r = arr[i].lastIndexOf('"');
// 右边去掉所有空格
var text = arr[i].substring(l, r).rtrim();
arr[i] = text;
}
// 打印到左边
inputTextarea.value = '';
for (var i = 2; i <= arr.length - 2; i++) {
if (i === arr.length - 2) {
inputTextarea.value = inputTextarea.value + arr[i];
} else {
inputTextarea.value = inputTextarea.value + arr[i] + '\n';
}
}
}
}
</script>
</html>