Home > Web Front-end > Front-end Q&A > Replace input string with javascript

Replace input string with javascript

WBOY
Release: 2023-05-12 12:05:06
Original
1578 people have browsed it

With the widespread application of JavaScript in front-end development, it is often necessary to use JavaScript to operate strings entered by users. Among them, the most common one is string replacement. In JavaScript, we usually use the string function replace() to implement replacement operations. The replace() function can quickly replace the matching string with a new string. This article will introduce how to use JavaScript's replace() function to replace the input string.

1. Basic usage of replace() function

In JavaScript, use the replace() function of a string object to replace a certain substring in it. The syntax is as follows:

string.replace(searchValue, replaceValue)

Among them, searchValue represents the substring that needs to be replaced, and replaceValue represents the new string to be replaced. The replace() function can accept two parameters or a regular expression as a parameter. At this time, it can implement string replacement operations more flexibly.

(1) Replace a certain substring in the string

Example:

var str = "html css javascript";
var newStr = str.replace( "javascript", "java");
console.log(newStr); // html css java

In this code, we define a string variable str and use the replace() function Replace "javascript" with "java". The new string is saved in the newStr variable and output to the console.

(2) Replace multiple substrings in a string

If you need to replace multiple substrings in a string, you can use regular expressions:

Example:

var str = "html css javascript";
var newStr = str.replace(/html|javascript/g, "java");
console.log(newStr); // java css java

In this code, we use the regular expression /html|javascript/g to match "html" and "javascript" in the string. The g parameter represents a global match, so that the replace() function can replace all matching strings. The new string replaced is still "java". The result is displayed as "java css java".

2. Application scenarios

(1) Modify the parameters in the URL

In web development, it is often necessary to modify the parameters in the URL. Suppose you want to change the "page=1" parameter in the URL to "page=2":

Example:

var url = "http://www.example.com?name= Lucy&page=1&age=20";
var newUrl = url.replace(/page=1/, "page=2");
console.log(newUrl);

In this code , we use the regular expression /page=1/ to match the parameter "page=1" in the URL. Then, replace it with "page=2", save the new URL in the newUrl variable, and output it to the console. The output result is "http://www.example.com?name=Lucy&page=2&age=20".

(2) Filter user input

In web applications, we often need to check user input, such as filtering sensitive words in user input. Example:

var dirtyStr = "I hate you, you are really annoying!";
var cleanedStr = dirtyStr.replace(/hate|annoying/g, "*" );
console.log(cleanedStr);

In this example, we first define a string dirtyStr that contains sensitive words. Then, use the replace() function and the regular expression /hate|annoy/g to find these sensitive words and replace them with "", and save the results in the cleanedStr variable. The output is "Iyou, you are really *!".

3. Summary

JavaScript’s replace() function can quickly replace the matching string with a new string, and is one of the widely used operating methods in front-end development. In this article, we introduce the basic usage of the replace() function and some simple application scenarios. By studying this article, you should be able to use the replace() function more skillfully to implement string replacement operations.

The above is the detailed content of Replace input string with javascript. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template