拿到一个需求:要求将一个字符串形态的规则可编辑化。
也就是将
A≥1 或 A≥1&B<3
转↓化
元件:A B C D T
符号:>< ≥ ≤ =
连接符:& |
思路:
先将字符串形态的规则先做切割处理,由于要做校验,再将切割好的字符串片段存入对应的变量当中去。
具体思路:
- 先根据连接符切割成多个规则片段,每一个规则片段对应一个数组索引
- 再根据每个规则片段进行分解切割
- 同类合并存到对应的属性上
代码实践:
// 将后台返回的字符串规则切割成表单呈现
parseDomins(data) {
let domains = [];
data = data.replace(/&/g, "@&");
data = data.replace(/[|]/g, "@|");
data.split("@").forEach(item => {
if (item == "") return;
domains.push({});
item = item.replace(/&/g, "&@");
item = item.replace(/[|]/g, "|@");
item = item.replace(/≥/g, "@≥@");
item = item.replace(/≤/g, "@≤@");
item = item.replace(/>/g, "@>@");
item = item.replace(/=/g, "@=@");
item = item.replace(/</g, "@<@");
item.split("@").forEach(subitem => {
if (item == "") return;
switch (subitem) {
case "&":
case "|":
if (domains[domains.length - 1].connectionSymbol)
domains[domains.length - 1].connectionSymbol += subitem;
else domains[domains.length - 1].connectionSymbol = subitem;
break;
case "A":
case "B":
case "C":
case "D":
case "T":
if (domains[domains.length - 1].elementType)
domains[domains.length - 1].elementType += subitem;
else domains[domains.length - 1].elementType = subitem;
break;
case "≥":
case "≤":
case ">":
case "<":
case "=":
if (domains[domains.length - 1].symbol)
domains[domains.length - 1].symbol += subitem;
else domains[domains.length - 1].symbol = subitem;
break;
default:
if (domains[domains.length - 1].num)
domains[domains.length - 1].num += subitem;
else domains[domains.length - 1].num = subitem;
break;
}
});
});
return domains;
},
结果:
优化后的执行代码
这是根据老姚评论给出的方法优化而来的,可以去评论区围观之~
// 将后台返回的字符串规则切割成表单呈现(配合修改用户标签使用)
parseDomins(data) {
let temp = [];
data = data.replace(/(\&|\|)/g, (match, p1) => `@${p1}`);
data.split("@").forEach(item => {
temp.push({});
item.replace(
/(\&|\|)?([ABCDT])(>|<|≥|≤|=)(\d+)/,
(match, connectionSymbol, elementType, symbol, num) => {
temp[temp.length - 1].connectionSymbol = connectionSymbol;
temp[temp.length - 1].elementType = elementType;
temp[temp.length - 1].symbol = symbol;
temp[temp.length - 1].num = num;
}
);
});
return temp;
},