How can a string be transformed into a JavaScript Object without using JSON?

Question

How can a string be transformed into a JavaScript Object without using JSON?

I have a good grasp on parsing a valid JSON string using JSON.parse('{"key" : "value"}').

But what happens when dealing with a valid JS object, but invalid JSON, such as: JSON.parse("{ key : 'value'}")? The outcome of this example is an error:

Uncaught SyntaxError: Unexpected token k in JSON at position 2

My current focus is on a more intricate task. I aim to parse a string representing a JS object containing RegEx (not supported by JSON, but accepted in JS) into a JS object :

'{ key1 : /val1/g , key2 : /val2/i }'

The ultimate goal is to utilize this object with Mongoose and search for documents using it :

Model.find({
     key1 : /val1/g ,
     key2 : /val2/i
})

I have made attempts to apply a rather complex RegEx to the String, replacing /val1/g with new RegEx("val1","i") :

str = str.replace( /\/(.+?)\/(g?i?).+?(?=,|})/g , "new RegExp(`$1`,`$2`)" )

The .replace() function successfully manipulates the string as intended. This results in:

{ key1 : new RegExp("val1","g") , key2 : new RegExp("val2","i") }

However, attempting to use JSON.parse on it still fails because new RegEx("val1","i") is not a valid value.

javascript json string parsing object

Answer 1

Answer №1

In the case that you have control over and trust the text being converted, eval can be used:

var str = '{ key1 : /val1/g , key2 : /val2/i }';
var obj = eval("(" + str + ")");
console.log(obj.key1);

It's important to note that when using eval, if your expression starts with {, it should be wrapped in () so the parser recognizes it as an object initializer, not a block.

A few things to keep in mind about using eval:

It allows for executing arbitrary code. Therefore, you must fully trust the text being evaluated. Avoid evaluating user input.
Code within an execution context containing a call to eval is difficult to optimize because the JavaScript engine cannot predict the string content during parsing. To potentially improve performance, consider encapsulating this logic in a separate function called from your main logic instead of embedding it directly.

Answer 2

In the case that you have control over and trust the text being converted, eval can be used:

var str = '{ key1 : /val1/g , key2 : /val2/i }';
var obj = eval("(" + str + ")");
console.log(obj.key1);

It's important to note that when using eval, if your expression starts with {, it should be wrapped in () so the parser recognizes it as an object initializer, not a block.

A few things to keep in mind about using eval:

It allows for executing arbitrary code. Therefore, you must fully trust the text being evaluated. Avoid evaluating user input.
Code within an execution context containing a call to eval is difficult to optimize because the JavaScript engine cannot predict the string content during parsing. To potentially improve performance, consider encapsulating this logic in a separate function called from your main logic instead of embedding it directly.

Answer 3

Answer №2

I encountered a similar issue which I managed to resolve using the split and reduce methods.

const parseStringToObject = (stringToParse) => {
    if(typeof stringToParse === 'string'){
        let currentKey = '';
        const keyValPairArr = stringToParse.replace('{','').replace('}','').split(':');
        return keyValPairArr.reduce((obj,current,index,arr)=>{
            const previousKey = currentKey;
            const arrKeyVal = current.trim().split(',');
            currentKey = index!==arr.length-1?arrKeyVal.pop().trim():'';
            const previousVal = arrKeyVal.join(',');
            if(previousKey&&previousVal!=='')obj[previousKey]=previousVal;
            return obj;
        },{})
    }else{
        return stringToParse||{};
    }
}

// Here are some sample results

const example1 = parseStringToObject('{first : 1, second : 2nd, third: "third, 3rd" }')
console.log(example1) // output: {first: '1', second: '2nd', third: '"third, 3rd"'}

This function will return either an empty object or an object converted from the provided string.

Answer 4

I encountered a similar issue which I managed to resolve using the split and reduce methods.

const parseStringToObject = (stringToParse) => {
    if(typeof stringToParse === 'string'){
        let currentKey = '';
        const keyValPairArr = stringToParse.replace('{','').replace('}','').split(':');
        return keyValPairArr.reduce((obj,current,index,arr)=>{
            const previousKey = currentKey;
            const arrKeyVal = current.trim().split(',');
            currentKey = index!==arr.length-1?arrKeyVal.pop().trim():'';
            const previousVal = arrKeyVal.join(',');
            if(previousKey&&previousVal!=='')obj[previousKey]=previousVal;
            return obj;
        },{})
    }else{
        return stringToParse||{};
    }
}

// Here are some sample results

const example1 = parseStringToObject('{first : 1, second : 2nd, third: "third, 3rd" }')
console.log(example1) // output: {first: '1', second: '2nd', third: '"third, 3rd"'}

This function will return either an empty object or an object converted from the provided string.

How can a string be transformed into a JavaScript Object without using JSON?

Answer №1

Answer №2

Similar questions

Breaking down classes and cross-referencing them with a different DIV using JQuery

Error caught: The `onClick` listener was anticipated to be a function, but instead, it was found to be of type `object` in

Unraveling intricate JSON structures into DataFrames using Julia

Issue: Error message - Unhandled promise rejection: NodeInjector error - ControlContainer not found

Guide on linking an XML reply to TypeScript interfaces

Transmit object from NodeJS to PHP

Aligning Description Item components horizontally in antdLearn how to easily horizontally align Description

Vue.js Pagination Issue - Current Page Number Beyond Maximum Page Limit

JavaScript inserted into debug console by developer

What are some ways I can integrate my Json object into my IONIC app rather than relying on a hardcoded object?

Using a structural directive in Angular 2 that accepts a String as an input

Trigger file upload window to open upon clicking a div using jQuery

What is the best way to incorporate this HTML and script into a React component?

Interval function failing to update information on Jade template

Retrieve data by sorting based on the count column in a joined table with Sequelize

There is no result being returned by Model.findOne()

Modifying an onClick handler function within a react element located in a node module, which points to a function in a prop declared in the main Component file

The message "The property 'layout' is not found on the type 'FC<WrapperProps>' in Next.js" is displayed

Updating Tailwind CSS to accommodate older web browsers by converting modern rgba() notation to be browser-compatible

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself