简介
我正在开发我的jQuery语法突出显示脚本，我想实现一个美化器，它可以缩小代码，然后通过在需要的地方添加新行和制表位来美化它。
我现在正在处理CSS部分，在{和}之间的每一行添加制表符空间时遇到了问题。
现场示例：
>在CodePen上查看
>查看下方
code = $(".input").html().trim();
if (code) {
code = code
// REMOVE TAB SPACES
.replace(/( )/gi,'')
// REMOVE NEW LINES
.replace(/[nr]/g,'')
// REMOVE SPACES BETWEEN SECTIONS
.replace(/(;|{|})(s+)([^ s+])/g,'$1$3')
.replace(/(;|{|})(s+)([^ s+])/g,'$1$3')
.replace(/(*/)(s+)([^ s+])/g,'$1$3');
}
$('.minified').text(code);
minified = $('.minified').html();
if (minified) {
minified = minified
.replace(/(;|}|{)/gi,'$1nr')
.replace(/((/*)(| )([^"'sn]+)(| )(*/))/gi,'nr$1nr');
var level = 0;
var lines = minified.split("n");
$.each(lines, function(n, elem) {
last = elem[elem.length -1]
if (last === "{") { level = level + 1; }
else if (last === "}") { level = level - 1; }
else {
var tab = " ".repeat(level);
elem = tab + elem;
}
});
}
$('.beautified').text(minified);.wrap {
float:left;
width: 400px;
margin: 20px;
}
.wrap > h1 {
text-align: center;
}
pre {
float: left;
width:100%;;
height: 400px;
border: 1px solid #000000;
overflow: auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrap">
<h1>INPUT</H1>
<pre class="input">
div.highlight {
background:#FFFFFF;
border:1px solid #E0E0E0;
font-family:"Courier New",Courier,monospace;
overflow: hidden;
}
div.highlight pre{
width: 100%;
overflow: auto;
padding:0;
margin:0;
font-size:13px;
clear: both;
}
/* tabs */
div.highlight ul.tabs {
overflow: hidden;
padding: 5px 0 5px 0;
margin: 0;
list-style: none;
border-bottom: 1px solid #E0E0E0;
width: 100%;
}
div.highlight ul.tabs li {
padding: 0;
margin: 0 5px;
float: left;
background: none;
border-bottom: 1px dashed #CCC;
line-height:1.0em;
color: #CCC;
cursor: pointer;
}
div.highlight ul.tabs li.active {
border-bottom: none;
cursor: default;
}
div.element {
flex-direction: row;
flex-wrap: nowrap;
flex-flow: column-reverse wrap;
}
</pre>
</div>
<div class="wrap">
<h1>MINIFIED</H1>
<pre class="minified"></pre>
</div>
<div class="wrap">
<h1>BEAUTIFIED</H1>
<pre class="beautified"></pre>
</div>问题
- 我如何正确地循环遍历每一行，如果这一行没有以开头(
{)或结尾(})花括号结束，请使用制表符将代码缩进到由level计时的四个空格中的任意一个
更新1)。通过Regex为
CSS提供一个仅限一次缩进的工作版本但是，此版本仅适用于一个缩进，并且仅适用于CSS我想让我的另一个版本用于其他语言以及为
@media查询进一步缩进，从而进一步缩进代码内部：>CodePen示例
>以下示例
> > code = $(".input").html().trim(); > > if (code) { > code = code > // REMOVE TAB SPACES > .replace(/( )/gi,'') > // REMOVE NEW LINES > .replace(/[nr]/g,'') > // REMOVE SPACES BETWEEN SECTIONS > .replace(/(;|{|})(s+)([^ s+])/g,'$1$3') > .replace(/(;|{|})(s+)([^ s+])/g,'$1$3') > .replace(/(*/)(s+)([^ s+])/g,'$1$3'); > } > $('.minified').text(code); > > minified = $('.minified').html(); > > if (minified) { > minified = minified > .replace(/(;|}|{)/gi,'$1nr') > .replace(/((/*)(| )([^"'sn]+)(| )(*/))/gi,'nr$1nr') > .replace(/(([a-zA-Z0-9 -]+)(:)([a-zA-Z0-9 -#%"-., ]+)(;))/g,' $1'); > } > $('.beautified').text(minified); > >> > .wrap { > float:left; > width: 400px; > margin: 20px; > } > .wrap > h1 { > text-align: center; > } > pre { > float: left; > width:100%;; > height: 400px; > border: 1px solid #000000; > overflow: auto; > } > > pre.minified { > height: 50px; > } > >> > <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> > <div class="wrap"> > <h1>INPUT</H1> > <pre class="input"> > div.highlight { > background:#FFFFFF; > border:1px solid #E0E0E0; > font-family:"Courier New",Courier,monospace; > overflow: hidden; > } > div.highlight pre{ > width: 100%; > overflow: auto; > padding:0; > margin:0; > font-size:13px; > clear: both; > } > > /* tabs */ > div.highlight ul.tabs { > overflow: hidden; > padding: 5px 0 5px 0; > margin: 0; > list-style: none; > border-bottom: 1px solid #E0E0E0; > width: 100%; > } > div.highlight ul.tabs li { > padding: 0; > margin: 0 5px; > float: left; > background: none; > border-bottom: 1px dashed #CCC; > line-height:1.0em; > color: #CCC; > cursor: pointer; > } > div.highlight ul.tabs li.active { > border-bottom: none; > cursor: default; > } > div.element { > flex-direction: row; > flex-wrap: nowrap; > flex-flow: column-reverse wrap; > } > </pre> > </div> > <div class="wrap"> > <h1>MINIFIED</H1> > <pre class="minified"></pre> > </div> > <div class="wrap"> > <h1>BEAUTIFIED</H1> > <pre class="beautified"></pre> > </div> > >
你很接近。在您的代码中，elem是传递给each的函数中的一个局部变量。您将其修改为缩进，但当函数在迭代结束时返回时，程序就会忘记它。您可能希望将其分配回lines，可能与lines[n] = elem一起分配。编辑：$.map可能更合适。
然后，同样问题的另一个变体出现了。lines被更新，但是minified仍然是相同的。您可以使用minified = lines.join('n')将这些片段重新粘合在一起并更新minified。
由于各种原因，您的缩进算法无法工作。
1) 你需要在lines数组中这样写：lines[n] = tab + elem;
2)你错误地将minified而不是lines分配给了$('.beautified')
3)你的代码缩进深度没有超过1级。我将其修改为任意深度的缩进，并添加了一个代码笔示例来演示这一点。
$.each(lines, function(n, elem) {
var last = elem[elem.length -1];
if (last === "}") {
level--;
}
var tab = " ".repeat(level);
lines[n] = tab + elem + "n";
if (last === "{") {
level++;
}
});
lines = lines.join('');
$('.beautified').text(lines);
http://codepen.io/anon/pen/NdezxM