【发布时间】：2018-04-21 16:42:41
【问题描述】：
问题：
我想为自己制作一个较少排序的脚本。当我在 textarea 中输入 Less Code 并单击按钮时，p#result 应该会输出排序后的 Less Code。
Less 代码应该这样排序：
{
Mixins（都以“.mx”开头）
属性（按字母顺序排序）
}
这是我目前得到的：
index.html:
<head>
<script src="jquery.min.js"></script>
</head>
<textarea id="input" style="width: 600px; height: 300px; resize: none;">
</textarea>
<p id="result" style="max-width: 600px; word-wrap: break-word;"></p>
<button>Sort</button>
<script src="jquery.sorter.js"></script>
jquery.sorter.js：
var result = "",
mixins = "",
properties = "";
$("button").on("click", function () {
var textarea = $('#input').val().split('\n');
function checkLine(position) {
var index;
for (index = position; index < textarea.length; ++index) {
var line = textarea[index].trim();
if (line.includes("{") === true)
{
result = result + mixins + "<br>" + properties + line + "<br>";
mixins = "";
properties = "";
checkLine(index + 1);
} else if (line.includes("}") === true)
{
result = result + mixins + properties + line + "<br>";
mixins = "";
properties = "";
break;
} else if (line.includes(".mx") === true)
{
mixins = mixins + line + "<br>";
} else if (line.includes(":") === true)
{
properties = properties + line + "<br>";
} else
{
result = result + "<br>";
}
console.log(index + ": " + mixins + " " + properties);
}
}
checkLine(0);
$("p#result").append(result);
$("button").hide();
});
如果我输入这个：
.frame {
color: blue;
background-color: white;
.mx-hello(white);
.framesecond {
font-size: 12px;
background: green;
.mx-test(white);
}
}
我至少应该得到这个输出：（我还没有想到排序机制...：D）
.frame {
.mx-hello(white);
color: blue;
background-color: white;
.framesecond {
.mx-test(white);
font-size: 12px;
background: green;
}
}
但我得到了这个输出：
.frame {
.mx-hello(white);
color: blue;
background-color: white;
.framesecond {
.mx-test(white);
font-size: 12px;
background: green;
}
.mx-test(white);
font-size: 12px;
background: green;
}
.mx-hello(white);
color: blue;
background-color: white;
.framesecond {
.mx-test(white);
font-size: 12px;
background: green;
}
.mx-test(white);
font-size: 12px;
background: green;
}
背景 - 故事：
我在一家网络开发公司工作。我的 Less 代码总是看起来有点乱，但我们有指导如何格式化我们的代码。如果我完成了一个项目，我总是一小时一小时地坐在那里，只是重新安排更少的代码。然后我心想：“我的问题必须有一个更简单的解决方案！”。所以我用谷歌搜索和谷歌搜索并没有真正奏效。然后我决定自己尝试一下，这就是我在这里的原因！
希望您能理解我的问题，如果有不清楚的地方请告诉我，以便我编辑我的问题！ （我不太擅长 javascript，因此感谢您的帮助！:D）
【问题讨论】：
-
有什么东西阻止你使用排序功能吗？
-
这是什么功能？
-
好的，我会写一个解释它的答案。
-
其实，没关系。我将只是 link to MDN 并保留它。
-
为什么不使用
stylint --fix
标签： javascript jquery sorting less