如何改进这段代码,转换字符串

时间:2018-02-06 15:07:33

标签: javascript css html5 canvas

我目前正在开发一个项目,我需要以特定的方式转换字符串。所以,这个想法是这样的字符串:

r[10,55]r将转换为(Math.floor(Math.random() * (55 - 10 + 1)) + 10) - 使其js值从10到55(包括)随机。

和这样的字符串:%[50;w]%将被转换为(canvas.width / 100 * 50) - 使其占画布宽度的50%(w;代表宽度,h;代表高度)。

您还可以将这两个“函数”组合在一起:%[r[0,50]r;h]%使其成为(canvas.height / 100 * (Math.floor(Math.random() * (50 - 0 + 1)) + 0)),这意味着您将获得画布高度的0%到50%。

所以,他们现在正在做的事情看起来像这样:

    transform = function(i){
    var i = i;
    while(i.indexOf('r[') > -1){
        var part1 = i.substring(i.indexOf('r['));
        var part2 = i.substring(i.indexOf(']r') + 2);
        var r = part1.substring(0,part1.length - part2.length);

        var partBefore = i.substring(0,i.indexOf('r['));

        var firstNumber = r.substring(r.indexOf('r[') + 2);
        var comma = r.substring(r.indexOf(','));
        var secondNumber = r.substring(r.indexOf(',') + 1);
        firstNumber = firstNumber.substring(0,r.length - comma.length - 2);
        secondNumber = secondNumber.substring(0,secondNumber.length - 2);

        while(firstNumber.indexOf('%[') > -1){
            var part1A = firstNumber.substring(firstNumber.indexOf('%['));
            var part2A = firstNumber.substring(firstNumber.indexOf(']%') + 2);
            var p = part1A.substring(0,part1A.length - part2A.length);

            var partBeforeA = firstNumber.substring(0,firstNumber.indexOf('%['));

            var firstNumberA = p.substring(p.indexOf('%[') + 2);
            var commaA = p.substring(p.indexOf(';'));
            var secondNumberA = p.substring(p.indexOf(';') + 1);
            firstNumberA = firstNumberA.substring(0,p.length - commaA.length - 2);
            secondNumberA = secondNumberA.substring(0,secondNumberA.length - 2);

            if(secondNumberA == 'w'){ secondNumberA = 'canvas.width'; }
            else if(secondNumberA == 'h'){ secondNumberA = 'canvas.height'; }

            var partAfterA = firstNumber.substring(firstNumber.indexOf('%[') + p.length,firstNumber.length);
            firstNumber = partBeforeA + '(' + secondNumberA + ' / 100 * ' + firstNumberA + ')' + partAfterA;
        }

        var partAfter = i.substring(i.indexOf('r[') + r.length,i.length);
        i = partBefore + '(Math.floor(Math.random() * (' + secondNumber + ' - ' + firstNumber + ' + 1)) + ' + firstNumber + ')' + partAfter;
    }
    while(i.indexOf('%[') > -1){
        var part1 = i.substring(i.indexOf('%['));
        var part2 = i.substring(i.indexOf(']%') + 2);
        var p = part1.substring(0,part1.length - part2.length);

        var partBefore = i.substring(0,i.indexOf('%['));

        var firstNumber = p.substring(p.indexOf('%[') + 2);
        var comma = p.substring(p.indexOf(';'));
        var secondNumber = p.substring(p.indexOf(';') + 1);
        firstNumber = firstNumber.substring(0,p.length - comma.length - 2);
        secondNumber = secondNumber.substring(0,secondNumber.length - 2);

        if(secondNumber == 'w'){ secondNumber = 'canvas.width'; }
        else if(secondNumber == 'h'){ secondNumber = 'canvas.height'; }

        while(firstNumber.indexOf('r[') > -1){
            var part1A = firstNumber.substring(firstNumber.indexOf('r['));
            var part2A = firstNumber.substring(firstNumber.indexOf(']r') + 2);
            var r = part1A.substring(0,part1A.length - part2A.length);

            var partBeforeA = firstNumber.substring(0,firstNumber.indexOf('r['));

            var firstNumberA = r.substring(r.indexOf('r[') + 2);
            var commaA = r.substring(r.indexOf(','));
            var secondNumberA = r.substring(r.indexOf(',') + 1);
            firstNumberA = firstNumberA.substring(0,r.length - commaA.length - 2);
            secondNumberA = secondNumberA.substring(0,secondNumberA.length - 2);


            var partAfterA = firstNumber.substring(firstNumber.indexOf('r[') + r.length,firstNumber.length);
            firstNumber = partBeforeA + '(Math.floor(Math.random() * (' + secondNumberA + ' - ' + firstNumberA + ' + 1)) + ' + firstNumberA + ')' + partAfterA;
        }

        var partAfter = i.substring(i.indexOf('%[') + p.length,i.length);
        i = partBefore + '(' + secondNumber + ' / 100 * ' + firstNumber + ')' + partAfter;
    }
    return i;
};

它有一些问题..

我不知道如何识别,结束的位置,所以我在;函数中使用%[...;...]%代替,但这不是一个很好的解决方案,因为我想要在将来添加更多这样的功能。而且我无法想象, ; . :每次都会出现一个新的“分隔符”。

有更好的方法吗?

2 个答案:

答案 0 :(得分:0)

正如chrisz在评论中提到的那样,正则表达式可以提供很多帮助。以下是使用模板文字来处理前两个(未组合)字符串以从匹配元素生成输出的方法。

const regex1 = /r\[(\d+),(\d+)\]r/;
const str = 'r[10,55]r';
const match = str.match(regex1).slice(-2);
const out = `(Math.floor(Math.random() * (${match[1]} - ${match[0]} + 1)) + ${match[0]})`;
console.log(out);

const regex2 = /%\[(\d+);(h|w)\]%/;
const str2 = '%[50;w]%';
const match2 = str2.match(regex2).slice(-2);
const out2 = `(canvas${match[1] === 'h' ? '.height' : '.width'} / 100 * ${match2[0]})`;
console.log(out2);

答案 1 :(得分:0)

let conversion = 'r[10,55]r'
let reg = /r\[([0-9]{0,3}),([0-9]{0,3})]r/
let format = (string, match1, match2) => {
	return `(Math.floor(Math.random() * (${match2} - ${match1} + 1)) + ${match2})`
}
let res = conversion.replace(reg, format)

console.log(res)

let conversion = '%[50;w]%'
let reg = /%\[([0-9]{0,3});([a-z])]%/
let format = (string, match1, match2) => {
let dimension = match2 === 'w' ? 'width' : 'height'
  return `(canvas.${dimension} / 100 * ${match1})`
}
let res = conversion.replace(reg, format)

console.log(res)

以下是围绕两个单独场景的工作,目前正在进行组合转换方案。