我正在尝试制作一个简单的所见即所得编辑器，该编辑器能够使用 javascript 中的三元运算符为父部分和子部分创建文本缩进。该语言适用于 DJ 软件 Virtual DJ，但它的外观和功能与 javascript 完全相同。
我要排序的代码示例是
query1 ? query2 ? "query1 and query2 are true" : "query1 is true but query2 is false" : query3 ? "query1 and query2 are false but query3 is true" : "all queries are false"
基本上我想要做的是将父条件包装在一个带有css的div中，让它看起来像标签。我尝试用 JSFiddle 做一个例子，但没有得到我想要的反馈，所以我花了几个小时制作一个在动态插入 HTML 时实时更新 HTML 的例子。页面上有说明，包括一个抽象函数，使 string.replace 更容易使用页面。
我所追求的页面上有两个例子，一个是innerHTML，一个是带有格式的显示内容。我可能不会使用 classNames，我将使用 CSS3 选择器来控制一行的缩进量，因为这样我可以轻松地定位子节点。
感谢您的帮助，我已经为此苦苦挣扎了一段时间，我能想到的唯一解决方法是反转字符串并从头开始进行匹配，但这并没有解决我的问题.
如果您认为可以提供帮助，该页面也在我的伙伴服务器上 http://action-jackson.com.au/indentTest.html
再次感谢，
安德鲁。
- - 编辑 - - - - - - - - - - - - - - - - - - - - -
很抱歉第一次没有正确解释。我虽然网页上的例子就足够了。
具体来说，我想从字符串条目中缩进代码，以便用户从 XML 配置文件中给出字符串或类似的东西。然后我想使用正则表达式放入适当的标签以允许它显示在缩进的页面上。问题是我为这个程序使用了非常大的脚本，例如
var 'jog_fx' 0 ? param_greater 0% ? effect 'qb_filter' slider 3 +0.006 & effect 'ramp_delay' slider 1 +0.007 : effect 'qb_filter' slider 3 -0.005 & effect 'ramp_delay' slider 1 -0.007 : var 'jog_fx' 1 ? param_greater 0% ? effect 'crusher' slider 1 +0.005 & effect 'ramp_delay' slider 1 +0.005 : effect 'crusher' slider 1 -0.005 & effect 'ramp_delay' slider 1 -0.005 : var 'jog_fx' 2 ? param_smaller 0% ? effect 'trans' slider 1 -0.002 & effect 'flanjet' slider 1 -0.001 & effect 'qb_filter' slider 3 -0.002 & effect 'tal-reverb-2' slider 3 -0.001 & effect 'tal-reverb-2' slider 2 +0.0005 : effect 'trans' slider 1 -0.002 & effect 'flanjet' slider 1 +0.001 & effect 'qb_filter' slider 3 +0.002 & effect 'tal-reverb-2' slider 3 +0.001 & effect 'tal-reverb-2' slider 2 -0.0005 : var 'jog_fx' 3 ? param_greater 0% ? effect '3p_delay' slider 1 +0.002 : effect '3p_delay' slider 1 -0.002 : var 'jog_fx' 4 ? effect 'ramp_delay' slider 1 : var 'jog_fx' 5 ? device_side 'left' ? param_greater 0% ? param_multiply 25% & effect 'rollit' slider 3 +0.001 & effect 'rollit' slider 2 +0.001 : param_multiply 25% & effect 'rollit' slider 3 -0.001 & effect 'rollit' slider 2 -0.001 : param_greater 0% ? param_multiply 25% & effect 'rollit2' slider 3 +0.001 & effect 'rollit2' slider 2 +0.001 : param_multiply 25% & effect 'rollit2' slider 3 -0.001 & effect 'rollit2' slider 2 -0.001 : var 'jog_fx' 6 ? param_greater 0% ? effect 'gate_echo' slider +0.01 : effect 'gate_echo' slider 1 -0.01 : var 'jog_fx' 7 ? param_greater 0% ? effect 'multitap delay' slider +0.003 : effect 'multitap delay' slider 1 -0.003 : var 'jog_fx' 8 ? param_greater 0% ? param_multiply 25% & effect 'instajungle' slider 11 +0.01 : param_multiply 25% & effect 'instajungle' slider 11 -0.01 : touchwheel
我在想我可以使用 CSS3 选择器 [p:nth-child(n), p:nth-last-child(n)]
向元素添加填充/边距/左侧以进行缩进，但这并没有真正符合我的计划。我认为我需要做的是只获取字符串中具有 /\?([^:]:)/ 'start with "?any:" 的部分，然后获取具有 /\?([^\? ]）/， “？ 任何事物 ？” 最后 /:([^:])(:)/, ": anything :" 并添加标签，例如。使用页面上的 regie() 函数。
log(regie(str, [/\?([^\?]*)(/?)/g, /\?([^:]*)(\:)/g, /:([^:])(:)/g], ['</div>$1 <div class="forwards">$2 </div>', '</div>$1 <div class="forwards">$2</div>', '</div>$1 <div class="backwards">$2 </div>',]));
<!doctype html>
<html>
<head>
<title>Test Suite</title>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<!-- <link href='indent.css' rel='stylesheet' type='text/css'> -->
<style type='text/css'>
body{ background: #17191a; color: #aaa; font-family: 'Ubuntu Mono', sans-serif; overflow:none; } #content{ width: 1800px; height: 940px; margin:auto; } #outputs{ width: 1060px; float:left; } .wrapperHouse{ width: 492px; height: 450px; position:relative; overflow:hidden; float:left; margin: 10px; padding:0; } .wrapper{ overflow:hidden; height:500px; width: 500px; height: 450px; background: #27292A; float:left; overflow:hidden; } .scroll{ overflow:hidden; height:1000px; width: 500px; position: relative; top: -295px; z-index:0; transition:0.2s all; padding: 300px 0; } .bg{ box-shadow: 0 0 5px #111 inset,0 0 10px #222 inset; background: #1d1f20; background: -moz-linear-gradient(45deg, #1d1f20 1%, #2e2f30 99%); background: -webkit-gradient(linear, left bottom, right top, color-stop(1%,#1d1f20), color-stop(99%,#2e2f30)); background: -webkit-linear-gradient(45deg, #1d1f20 1%,#2e2f30 99%); background: -o-linear-gradient(45deg, #1d1f20 1%,#2e2f30 99%); background: -ms-linear-gradient(45deg, #1d1f20 1%,#2e2f30 99%); background: linear-gradient(45deg, #1d1f20 1%,#2e2f30 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1f20', endColorstr='#2e2f30',GradientType=1 ); } .bgh{ background: #35383a; background: -moz-linear-gradient(top, #35383a 0%, #131619 99%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#35383a), color-stop(99%,#131619)); background: -webkit-linear-gradient(top, #35383a 0%,#131619 99%); background: -o-linear-gradient(top, #35383a 0%,#131619 99%); background: -ms-linear-gradient(top, #35383a 0%,#131619 99%); background: linear-gradient(to bottom, #35383a 0%,#131619 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35383a', endColorstr='#131619',GradientType=0 ); } .bg:focus{ box-shadow: 0 0 5px #111 inset,0 0 10px #17199a inset; } #scriptHouse, #scriptWrapperHouse{ width: 700px; height: 920px; padding:0; } #scriptWindow{ background: #27292A; width: 700px; height: 920px; } .scriptWrapper h2{ width: 700px; transition:0.5s all; } .scriptWrapper h2:hover{ text-shadow:0 0 10px #099CC9; cursor: pointer; } #innerScript{ width: 660px; height: 1820px; padding:200px 20px; font-family: monospace; font-size: 1.1em; margin:0; position: relative; top: -180px; } .indent{ padding-left: 25px; } .true{ color: #099CC9; } .false{ color:#ae4343; } .query{ color: #ada243; } .string, .comment{ color:#43aed8; } .func{ color:#c244d6; } h2{ background: #000000; font-family: sans-serif; text-align: center; padding:0; padding-top:10px; margin:0; width: 492px; height:50px; background: #1a1c1e; border:1px solid #212325; transition:0.5s all; z-index:5; position: relative; top:0px; } h2:hover{ text-shadow:0 0 10px #099CC9; cursor: pointer; } pre{left:-30px;}
</style>
<body onload="check()">
<section id="content">
<section id="outputs">
<section class="wrapperHouse">
<div class="h2House bg"><h2 class="bgh">
inner html example
</h2></div>
<div id="pageHtml" class="bg wrapper">
<pre id="pre1" class="scroll"></pre>
</div>
</section>
<section class="wrapperHouse">
<header class="h2House bg"><h2 class="bgh">output of html example</h2></header>
<div id="indentHouse" class="bg wrapper">
<div id="innerIndent" class="scroll">
<div class="indent">
query1 ?
<div class="indent">
query2 ?
<div class="indent">
query1 are and query2 are true :
</div>
</div>
<div class="indent">
query1 is true but query2 is false :
</div>
<div class="indent">query3 ?
<div class="indent">
query1 and query2 are false but query3 is true :
</div>
</div>
<div>
all queries are false
</div>
</div>
</div>
</div>
</section>
<section class="wrapperHouse">
<header class="h2House bg"><h2 class="bgh" onclick="clearWindow()">inner html</h2></header>
<div id="realHtmlHouse" class="bg wrapper">
<pre id="realHtml" class="scroll"></pre>
</div>
</section>
<section class="wrapperHouse">
<div id="realOutputHouse" class="bg wrapper">
<header class="h2House bg"><h2 class="bgh" onclick="clearWindow()">output html</h2></header>
<div id="realOutputInner" class="scroll"></div>
</div>
</section>
</section>
<section id="scriptWrapperHouse" class="wrapperHouse">
<div class="scriptWrapper h2House bg"><h2 class="bgh" onclick="run()">click to run javascript</h2></div>
<div id="scriptHouse" class="wrapper bg">
<div id="scriptWindow">
<div id="innerScript" class="scroll" spellcheck="false" contenteditable="true">
<p class="comment">// the string of text is stored in the variable 'str'</p>
<p class="comment">// the log to the windows use <span class="func">log(string);</span></p>
<p class="comment">// for an abstracted replace function use
<br>// <span class="func">regie(string, search:array||string, replace:array||string, function:optional);</span>
<br>// if passing an array use regular expresson, string is for a single replace string that gets converted to RegExp
<br>// a function can be passed as an argument if it is necessary</p><br><p></p>
</div>
</div>
</div>
</section>
</section> <!-- end content -->
<script type="text/javascript">
function id(id){
return document.getElementById(id);
}
function tag(name){
return document.getElementsByTagName(name);
}
function classs(name){
return document.getElementsByClassName(name);
}
var output = id('realOutputInner');
var str = "query1 ? query2 ? query1 are and query2 are true : query1 is true but query2 is false : query3 ? query1 and query2 are false but query3 is true : all queries are false";
function log(text){
//debugger;
tag('pre')[1].innerHTML = text.replace(/</g, '<').replace(/(true|false|query)([0-9]*)/g, '<span class="$1">$1$2</span>');
output.innerHTML = text.replace(/(true|false|query)([0-9]*)/g, '<span class="$1">$1$2</span>');
};
function clearWindow(){
output.innerHTML = '';
tag('pre')[1].innerHTML = '';
};
var comStyle = function(element , pseudoElt){
if(!pseudoElt){pseudoElt = null}
if(id(element).style.top != ''){
return id(element).style
} else {
return window.getComputedStyle(document.getElementById(element), pseudoElt);
}
}
function regie(str, search, replacage, fn){
var rep = str;
//debugger;
console.log('arg1: ' + arguments[1] + ' arg2: ' + arguments[2]);
if(arguments.length < 4){
console.log('3 args');
if(typeof arguments[1] == 'string' && typeof arguments[2] == 'string'){
search = new RegExp(search, 'g');
str = str.replace(search, replacage);
} else {
console.log('args are not strings');
for(var i = 0; i < search.length; i++){
if(search[i].test(str)){
str = str.replace(search[i], replacage[i]);
}
}
}
} else {
console.log('4 args');
if(typeof arguments[1] == 'string' && typeof arguments[2] == 'string'){
for(var i = 0; i < search.length; i++){
if(search[i].test(str)){
str = str.replace(search[i], fn) + ' ';
}
}
} else {
for(var i = 0; i < search.length; i++){
if(search[i].test(str)){
str = str.replace(search[i], fn) + ' ';
}
}
}
}
return str;
};
function check(){
for (var i = 0; i < 2; i++) {
tag('pre')[i].innerHTML = regie(id('innerIndent').innerHTML, [/</g , /(true|false|query)([0-9]*)/g, /^\t\t/, /\t/g] , ['<', '<span class="$1">$1$2</span>', '', ' ']);
};
console.log(id('innerIndent').innerHTML);
id('indentHouse').innerHTML = regie(id('indentHouse').innerHTML, '(true|false|query)([0-9]*)' , '<span class="$1">$1$2</span>');
id('realOutputInner').innerHTML = id('innerIndent').innerHTML;
};
function run(){
var stuff = id('innerScript').innerText.replace(/<[a-z0-9 =\"\']*>/g, '');
eval(stuff);
};
function displaywheel(e){
e.preventDefault();
var scroll = classs('scroll');
for (var i = 0; i < scroll.length; i++) {
scroll[i].style.top = window.getComputedStyle(document.getElementById(scroll[i].id), null).top;
};
//console.log(e.target);
var evt=window.event || e;
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta;
if(delta < 0){
var pos = parseInt(e.target.style.top);
pos -= 50;
e.target.style.top = pos +'px';
} else {
var pos = parseInt(e.target.style.top);
pos += 50;
e.target.style.top = pos +'px';
}
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
(function(){
var scroll = classs('wrapper');
for (var i = 0; i < scroll.length; i++) {(function(x){
scroll[x].addEventListener(mousewheelevt, displaywheel, false);
}(i));
}
})();
</script>
</body>
</html>