In early October 2020, I officially changed my career to become a Web front-end engineer, but I only know simple HTML and CSS. Fortunately, the company gave me the opportunity to learn by myself and grow in the project.

At present, I am the only one in the front of the company, and I can only use the weak basic knowledge to climb the hole in the project. These simple problems can be solved by the technical leaders in minutes, but IT took me a long time to climb the problem, so I recorded these problems to consolidate my miserable foundation.

Text field textarea this pit

Uncaught SyntaxError: Invalid or unexpected Token When you enter a text field, press Enter to wrap a line, and click the save button to send the data to the background.

This is because entering Spaces and newlines in the Textarea text field is converted to special characters /s and /n

Therefore, when obtaining the input content of the text field, the carriage return and space in the data should be escaped first, and then passed to the back end through Ajax.

The following code can be escaped:

let newUpdate=$(updateVersion).val().replace(/\n/g,"<br>").replace(//g,"&nbsp");

The replace() method is used to replace some characters in a string with other characters, or to replace a substring that matches a regular expression.

Document help: www.w3school.com.cn/jsref/jsref…

Escaping through the replace() method passes \n to < br > to the back end.

Of course, to prevent the user from intentionally entering special characters, I will make a judgment call before preserving the data and prompt him not to enter the special symbol \ if the content is present. Since it was for internal use, there was no consideration as to whether it was friendly.

This fixes a problem where input Spaces and newlines in the Textarea text field can be converted to special characters, but it also raises new issues. That is to convert the < br > tag and store it in the database. The next time you make a change, you’ll see that the content is displayed with < br > tags instead of line breaks

So when I get the data display, I escape it again to \n to make it wrap when the page is displayed

The following code can be escaped:

replace(/<br>/g,'\n');

Remember to write /g and all of them turn, because I forgot to write /g, the first line break escaped correctly, but the rest are still < br >, so I doubt life for a while.

This is the correct display.

I hope it’s helpful, because I’m the only one in the company who’s half-skilled, so WHEN I’m interviewing for the front position, I have to be the interviewer.

I asked this question when interviewing front-end engineers with more than a year of experience and came up short. It’s not that I’m asking this on purpose, but I don’t have the skills to ask people about the technology, only the details of the project.

In my opinion, textarea is more commonly used. If you can’t answer this question, I think it is not very reliable.

Welcome tech leaders to correct mistakes.