Regex for value substitution

Question

Regex for value substitution

I've always struggled with understanding regex. Even after trying various tools, I still couldn't grasp it. Can someone please provide me with assistance? I'm working with jquery.

For example, if I have a css text-shadow property like

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

and a scale ratio of 0.5, how can I calculate each position value by multiplying it with the ratio of 0.5 and return a new string as follows:

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

Furthermore, is it feasible to apply this calculation to text-shadows with multiple values, such as:

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 assume one would need to separate them and then replace each value individually?

Any help on this matter would be greatly appreciated.

Thank you.

javascript jquery css regex

Answer 1

Answer №1

Utilize regular expressions to extract the px values and then apply a replacement function to multiply those 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)

Answer 2

Utilize regular expressions to extract the px values and then apply a replacement function to multiply those 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)

Answer 3

Answer №2

When it comes to determining the arrangement of text-shadow properties in the sequence

'color h-shadow  v-shadow blur-radius'

, you can rely on the subsequent function to achieve this goal.

function adjustValues(x, scale){
    //Considering that the input string is separated by ", "
    let result = x.split(", ").map(e=>{
                    let arr = e.split(" ")
                    //.match(/\d+/g) detects numbers from the string 
                    // for instance, it produces an array ['20'] for '20px'
                    // then these are converted into numbers using Number()
                    // and finally multiplied by the scaling factor
                    let horizontalShadow = Number(arr[1].match(/\d+/g)[0])*scale 
                    let verticalShadow = Number(arr[2].match(/\d+/g)[0])*scale 
                    let blurRadius = Number(arr[3].match(/\d+/g)[0])*scale 
                    return `${arr[0]} ${horizontalShadow}px ${verticalShadow}px ${blurRadius}px`
                 })
    return result
}

let shadowProperties = "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 outcome will be an array of strings for various values which are combined using the following code
console.log(adjustValues(shadowProperties, 0.5).join(", "))

Answer 4

When it comes to determining the arrangement of text-shadow properties in the sequence

'color h-shadow  v-shadow blur-radius'

, you can rely on the subsequent function to achieve this goal.

function adjustValues(x, scale){
    //Considering that the input string is separated by ", "
    let result = x.split(", ").map(e=>{
                    let arr = e.split(" ")
                    //.match(/\d+/g) detects numbers from the string 
                    // for instance, it produces an array ['20'] for '20px'
                    // then these are converted into numbers using Number()
                    // and finally multiplied by the scaling factor
                    let horizontalShadow = Number(arr[1].match(/\d+/g)[0])*scale 
                    let verticalShadow = Number(arr[2].match(/\d+/g)[0])*scale 
                    let blurRadius = Number(arr[3].match(/\d+/g)[0])*scale 
                    return `${arr[0]} ${horizontalShadow}px ${verticalShadow}px ${blurRadius}px`
                 })
    return result
}

let shadowProperties = "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 outcome will be an array of strings for various values which are combined using the following code
console.log(adjustValues(shadowProperties, 0.5).join(", "))

Answer 5

Answer №3

If you want to convert the pixel values into half by using a simple JavaScript code, follow these steps:

let pixels = '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 splittedPixels = pixels.split(', ');
console.log(splittedPixels);

let halvedArr = splittedPixels.map(item => item.match(/\d+(?=px)/g).map(num => parseInt(num * 0.5))).flat(1);
console.log(halvedArr);

let finalResult = [];

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

console.log(finalResult);
console.log(finalResul.join(''))

Answer 6

If you want to convert the pixel values into half by using a simple JavaScript code, follow these steps:

let pixels = '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 splittedPixels = pixels.split(', ');
console.log(splittedPixels);

let halvedArr = splittedPixels.map(item => item.match(/\d+(?=px)/g).map(num => parseInt(num * 0.5))).flat(1);
console.log(halvedArr);

let finalResult = [];

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

console.log(finalResult);
console.log(finalResul.join(''))

Regex for value substitution

Answer №1

Answer №2

Answer №3

Similar questions

Dynamic loading of dependent dropdowns for ActiveAdmin based on the selection made in the first dropdown

Creating a mockup for a website design project in my class, utilizing HTML and CSS. Encountering issues with the CSS not displaying correctly, unsure of the root cause of the problem

Using regex with multiple negative lookbehinds allows for more sophisticated pattern matching

Is there a way to retrieve the global variable within a local scope?

What is the process for implementing an image as the background instead of a color for each column in a Google chart?

The scroll feature in JavaScript is malfunctioning

Characteristics within the primary template element of a directive

Having difficulty running assessments on the connected components

How to alter the color of a Twitter bootstrap progress bar

Using VueJS to Create a Range of Years from 1900 to Present Year

What is preventing the execution of the bower update command in the Package Manager Console?

Error in Babel-Loader when executing npm run build

What is the reason for encountering the error message "Property 'floatThead' does not exist on type 'JQuery<any>' when trying to use floatThead in Angular/TypeScript?

Attempting to modify the animation speed of a fadeOut queue in jQuery from "slow" to the digit "3000" is proving unsuccessful

Initiate communication with the server by sending a callback through ajax

What is the best way to determine if an array of objects is present in the state of a React

Ensure HTML5 video fills window completely without any overflow

Center alignment is not possible for the Div element

The background images aren't tiling properly on mobile safari

The animated sticky header lacks smooth animation while scrolling upwards