Javascript 更少的分拣机

Question

问题：

我想为自己制作一个Less-sorting脚本。当我在文本区域中输入 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 Code 总是看起来有点乱，但我们有如何格式化代码的指南。如果我完成了一个项目，我总是坐在那里一小时又一小时，只是重新安排更少的代码。然后我心想：“一定有更简单的解决方案来解决我的问题！”。所以我在谷歌上搜索了又搜索，但没有任何效果。然后我决定自己尝试一下，这就是我来这里的原因！

我希望你理解我的问题，如果有什么不清楚的地方请告诉我，这样我就可以编辑我的问题了！（我不太擅长javascript，所以感谢任何帮助！:D）

Answer 1

我看了看能不能解决这个问题。检查一下：

代码笔：https://codepen.io/huppys/pen/VrbxLd?editors=1010

我用一些正则表达式替换了 string.includes("something")，以便能够过滤一些不同类型的 less 表达式。

另外：属性得到排序。找到属性后，描述属性的字符串被推入数组。在将找到的属性添加到输出字符串之前，它们会被排序。

旁注：您使用什么 IDE 或编辑器来编写 LESS 代码？也许它可以自己处理语法排序？

Javascript 更少的分拣机

Javascript Less Sorter

javascript

sorting

jquery

less

问题：

这是我目前得到的：

背景 - 故事：

我希望你理解我的问题，如果有什么不清楚的地方请告诉我，这样我就可以编辑我的问题了！ （我不太擅长javascript，所以感谢任何帮助！:D）

我希望你理解我的问题，如果有什么不清楚的地方请告诉我，这样我就可以编辑我的问题了！（我不太擅长javascript，所以感谢任何帮助！:D）