CODEWITHSUNDEEP
javascriptjquerycssregex
Tuan Nguyen
Tuan Nguyen

Reputation: 19

Value replacement with Regex

regex is one of those things that I can never understand. I've tried using regex tools but I couldn't do it. Could someone help me please? I'm using jquery

If I have a css text-shadow property of

rgba(0,0,0,0.1) 10px 20px 5px

and I have a scale ratio of 0.5

How would I get each of the position value, multiply it by ratio of 0,5 and return a new string of

rgba(0,0,0,0.1) 5px 10px 2.5px

then is it possible to do it for text-shadows with multiple values? like

rgba(0,0,0,0.1) 15px 12px 5px, rgba(0,0,0,0.1) 25px 30px 6px, rgba(0,0,0,0.1) 5px 15px 25px

I guess you can split it up then perform replacement for each value?

Any help is much appreciated.

Thank you

Upvotes: 0

Views: 164

Answers (3)

Sven.hig
Sven.hig

Reputation: 4519

Use regex to get the px values and then use replace to multiply the matched values

str = "rgba(0,0,0,0.1) 10px 20px 5px"
newstr = str.replace(/(-?\d+\.?\d?)(?=px)/g,o => o*0.5)
console.log(newstr)

Upvotes: 1

sonEtLumiere
sonEtLumiere

Reputation: 4562

You can extract the px values and multiply by 0.5 each number by this way:

let str = 'rgba(0,0,0,0.1) 15px 12px 5px, rgba(0,0,0,0.1) 25px 30px 6px, rgba(0,0,0,0.1) 5px 15px 25px';

let splited = str.split(', ');
console.log(splited);

let arr = splited.map(x => x.match(/\d+(?=px)/g).map(y => parseInt(y * 0.5))).flat(1);
console.log(arr);

let result = [];

for(i=0; i<arr.length; i+=3){
    result.push('rgba(0,0,0,0.1) ');
    result.push(arr[i] + 'px ' + arr[i+1] + 'px ' + arr[i+2] + 'px, ');
    }

console.log(result);
console.log(result.join(''))

Upvotes: 0

Dinesh Nadimpalli
Dinesh Nadimpalli

Reputation: 1491

Assuming the positioning of the properties of text-shadow is in the order 'color h-shadow v-shadow blur-radius'. The following function should solve the purpose.

function generateScaledValues(x, scale){
    //Assuming the input string is equally separated by ", "
    let result = x.split(", ").map(e=>{
                    let arr = e.split(" ")
                    //.match(/\d+/g) is used to find the number from the string 
                    // example it will return an array ['20'] for '20px'
                    // furthur we need to convert it into number using Number()
                    // which is then multiplied with the scaling factor
                    let hShadow = Number(arr[1].match(/\d+/g)[0])*scale 
                    let vShadow =Number(arr[2].match(/\d+/g)[0])*scale 
                    let blurRadius = Number(arr[3].match(/\d+/g)[0])*scale 
                    return `${arr[0]} ${hShadow}px ${vShadow}px ${blurRadius}px`
                 })
    return result
}

let textShadowProps = "rgba(0,0,0,0.1) 15px 12px 5px, rgba(0,0,0,0.1) 25px 30px 6px, rgba(0,0,0,0.1) 5px 15px 25px"

// The result will be an array of strings for multiple values which we join using the below code
console.log(generateScaledValues(textShadowProps, 0.5).join(", "))

Upvotes: 1

Related Questions