Crockford's method of replacing values with nested objects

Question

Crockford's method of replacing values with nested objects

/** Custom Supplant Method **/
String.prototype.customSupplant = function(obj) {
    return this.replace (/{([^{}]*)}/g,
        function (match, propPath) {
            var props = propPath.split('.');
            var result = obj;
            for (var i = 0; i < props.length; i++) {
                result = result[props[i]];
            }
            return typeof result === 'string' || typeof result === 'number' ? result : match;
        }
    );
};

Crockford may be considered a JavaScript Grand Wizard, however his prototype lacks support for replacing properties in multiple level objects.

I am seeking an enhanced version of the supplant function that can handle replacement of nested object properties like '{post.detailed}'. Can anyone assist with creating such a revised version?

javascript

Answer 1

Answer №1

Solving this problem shouldn't pose a challenge. Implement the following alternative replace function:

const customReplace = (original, replacement) => {
    let result = original,
        segments = replacement.split(".");
    for (let j=0; result && j<segments.length; j++)
        result = result[segments[j]];
    return typeof result === 'string' || typeof result === 'number' ? result : original;
}

Answer 2

Solving this problem shouldn't pose a challenge. Implement the following alternative replace function:

const customReplace = (original, replacement) => {
    let result = original,
        segments = replacement.split(".");
    for (let j=0; result && j<segments.length; j++)
        result = result[segments[j]];
    return typeof result === 'string' || typeof result === 'number' ? result : original;
}

Answer 3

Answer №2

I absolutely loathe it when individuals cram their own trash onto the original varieties in JavaScript. If I were to compose it myself, I would take the following steps... But why overlook boolean?

function replaceText(str, data) {
    return str.replace(/{([^{}]*)}/g, function (a, b) {

        // Separate the variable into its dot notation components
        var p = b.split(/\./);

        // The c variable serves as our pointer that will navigate through the object
        var c = data;

        // Iterate over the steps in the dot notation path
        for(var i = 0; i < p.length; ++i) {

            // Don't process if the key doesn't exist in the object
            // similar to how the function behaved for invalid values
            if(c[p[i]] == null)
                return a;

            // Move the pointer to the next step
            c = c[p[i]];
        }

        // Return the data if it's a string or number, otherwise do not process
        // return the initial value, e.g. {x}
        return typeof c === 'string' || typeof c === 'number' ? c : a;
    });
};

By the way, this method does not accommodate arrays; additional steps are needed to support them.

Answer 4

I absolutely loathe it when individuals cram their own trash onto the original varieties in JavaScript. If I were to compose it myself, I would take the following steps... But why overlook boolean?

function replaceText(str, data) {
    return str.replace(/{([^{}]*)}/g, function (a, b) {

        // Separate the variable into its dot notation components
        var p = b.split(/\./);

        // The c variable serves as our pointer that will navigate through the object
        var c = data;

        // Iterate over the steps in the dot notation path
        for(var i = 0; i < p.length; ++i) {

            // Don't process if the key doesn't exist in the object
            // similar to how the function behaved for invalid values
            if(c[p[i]] == null)
                return a;

            // Move the pointer to the next step
            c = c[p[i]];
        }

        // Return the data if it's a string or number, otherwise do not process
        // return the initial value, e.g. {x}
        return typeof c === 'string' || typeof c === 'number' ? c : a;
    });
};

By the way, this method does not accommodate arrays; additional steps are needed to support them.

Answer 5

Answer №3

@Bergi's approach with added boolean support:

function checkValue(a, b) {
    var result = a,
        parts = b.split(".");
    for (var i=0; result && i<parts.length; i++)
        result = result[parts[i]];
    return typeof result === 'string' || typeof result === 'number' || typeof result === 'boolean' ? result : a;
}

Crockford's Supplant method adapted to include boolean support:

if (!String.prototype.supplant) {
    String.prototype.supplant = function (data) {
        return this.replace(/{([^{}]*)}/g,
            function (match, key) {
                var value = data[key];
                return typeof value === 'string' || typeof value === 'n
umber' || typeof value === 'boolean' ? value : match;
            }
        );
    };
}

Wishing you the best of luck!

Link to more details

Answer 6

@Bergi's approach with added boolean support:

function checkValue(a, b) {
    var result = a,
        parts = b.split(".");
    for (var i=0; result && i<parts.length; i++)
        result = result[parts[i]];
    return typeof result === 'string' || typeof result === 'number' || typeof result === 'boolean' ? result : a;
}

Crockford's Supplant method adapted to include boolean support:

if (!String.prototype.supplant) {
    String.prototype.supplant = function (data) {
        return this.replace(/{([^{}]*)}/g,
            function (match, key) {
                var value = data[key];
                return typeof value === 'string' || typeof value === 'n
umber' || typeof value === 'boolean' ? value : match;
            }
        );
    };
}

Wishing you the best of luck!

Link to more details

Crockford's method of replacing values with nested objects

Answer №1

Answer №2

Answer №3

Similar questions

When using jQuery's ajax() function, it is possible to pass HTML as data and change the ampersands in URLs to &

What is the process for setting a cookie in Next.js from a different backend server?

Typography splits into a second line within the grid on the toolbar

When running through Selenium web driver, JS produces inaccurate results

Next.js deployments on Vercel are encountering issues with resolving local fonts

Maintaining data after page reload in Angular

The method of iterating over a string in key-value pairs

Unlocking Node.js packages within React JS is a seamless process

Update the controller variable value when there is a change in the isolate scope directive

AngularJS users are experiencing issues with the "See More" feature not functioning as expected

The Angular2 Observable fails to be activated by the async pipe

how can you add an object to an array in react native without altering the properties of the array

Pressing the submit button will trigger the execution of a .php script, which will then generate a popup on the screen and refresh a specific part of

Retrieve the ID of the image element using Jquery from a collection of images within a div container

Stop a loop that includes an asynchronous AJAX function

Concealing items in a loop using Javascript

ES6 Set enables the storage of multiple occurrences of arrays and objects within

Issue with video.js text track memory leakage (WebVTT/VTT)

Adding double quotes, where they haven't been added yet

Encountering challenges with managing global variables in my Node.js application

Crockford's method of replacing values with nested objects

Answer №1

Answer №2

Answer №3

Similar questions

When using jQuery's ajax() function, it is possible to pass HTML as data and change the ampersands in URLs to &amp;

What is the process for setting a cookie in Next.js from a different backend server?

Typography splits into a second line within the grid on the toolbar

When running through Selenium web driver, JS produces inaccurate results

Next.js deployments on Vercel are encountering issues with resolving local fonts

Maintaining data after page reload in Angular

The method of iterating over a string in key-value pairs

Unlocking Node.js packages within React JS is a seamless process

Update the controller variable value when there is a change in the isolate scope directive

AngularJS users are experiencing issues with the "See More" feature not functioning as expected

The Angular2 Observable fails to be activated by the async pipe

how can you add an object to an array in react native without altering the properties of the array

Pressing the submit button will trigger the execution of a .php script, which will then generate a popup on the screen and refresh a specific part of

Retrieve the ID of the image element using Jquery from a collection of images within a div container

Stop a loop that includes an asynchronous AJAX function

Concealing items in a loop using Javascript

ES6 Set enables the storage of multiple occurrences of arrays and objects within

Issue with video.js text track memory leakage (WebVTT/VTT)

Adding double quotes, where they haven't been added yet

Encountering challenges with managing global variables in my Node.js application

When using jQuery's ajax() function, it is possible to pass HTML as data and change the ampersands in URLs to &