0
176
ViewsHow leetcode do this: Read user's input String as multiple JavaScript functions and run a main function with user's input params
I am trying to replicate what leetcode does, as my React learning project. Below is my current UI setup.
I am using AceEditor as my text editor, right now I can read the value from the editor on change.
I want to execute the function containsDuplicate when I click the Run code button.
What I have right now is a string codeValue represent the user's input in the string format, and the testCase as the functions params in the string format as well,
// the codeValue is the complete text in the Ace Editor are
const [codeValue, setCodeValue] = useState('');
// The testCase is [1,2,3,1] which reads from the TestCase section
const [testCase, setTextCaseValue] = useState('');
const submitHandler = (inputParams) => {
console.log(codeValue);
};
What should I do to run the function containsDuplicate with the params testCase ? Assume the function name is always containsDuplicate?
Eval() will run the string as JS function, but what I need is, when the string is just function declaration, and there are multiple function declarations, I need to find the correct function from string, and run that function with give input.
Let's say the input string is
functionA() {
functionB();
}
functionB() {
}
I need to read that string and run functionA([1,2,3,4])
I don't have a good way to do this right now.
Thanks!
1 answers
Answer question0
If the function name is fixed*, you can "extract" the right function by wrapping the user code into yet another function and simply return that function from it:
const codeInput = `
function foo() {
console.log('foo');
}
function containsDuplicate(input) {
foo();
console.log('input', input);
return 42;
}
`;
const code = new Function(codeInput + '; return containsDuplicate;')()
const result = code([1,2,3]);
console.log('result', result);You can also add additional logic that verifies that containsDuplicate exists before trying to return it.
If you don't want to dictated the function name, there a couple of solutions, more or less complicated:
- You can provide a small CommonJS like wrapper and have the user assign the function to
module.exports. - If you wanted to allow ES module syntax, you could use a bundler like https://rollupjs.org and run it in the browser to convert the code into something runnable for you (you would still have to
eval/new Functionit) (there might also be lighter solutions for just convert ES module syntax to e.g. an IIFE).
*: Which is a reasonable assumption to make IMO. Since it's a special purpose environment you can dictate the structure of the code and require that there has to be a function with a specific name.