JavaScript regex replace uses String.replace() to find a pattern and return a new string with replacement text. The original string remains unchanged. Use a plain search string for a literal match, or a regular expression when you need flags, groups, or pattern rules.

For example, “red red”.replace(/red/, “blue”) returns “blue red”. The regex matches the first occurrence only because it does not include the global flag.

JavaScript regex replace: Replace one match and return a new string

A string search finds the exact sequence you provide: “cat”.replace(“cat”, “dog”) returns “dog”. A regex can express a broader rule, such as /cat/ or /cat[0-9]/.

The replacement argument can be a fixed string. In “Order 42”.replace(/[0-9]+/, “complete”), the digits are replaced, producing “Order complete”. Without g, a regex replacement stops after the first match. This behavior applies even when several matches exist.

Because replace() returns a string, assign its result when you need to keep it: const updated = source.replace(/old/, “new”). Calling the method does not modify source.

Regex replacement in JavaScript: Use g and i to replace all matches

The g flag means global matching. It makes the replacement continue through every match instead of stopping at the first one. For example, “Error error ERROR”.replace(/error/gi, “notice”) returns “notice notice notice”.

The i flag makes matching case-insensitive. It allows /error/i to match error, Error, and ERROR. Combine flags when needed: /error/gi replaces all case variations.

• /word/ replaces the first matching occurrence.
• /word/g replaces every matching occurrence with matching case.
• /word/i replaces the first case-insensitive occurrence.
• /word/gi replaces every case-insensitive occurrence.

A global regex does not change the original string, and the returned value is still a new string. Use a replacement string when every match should receive the same output.

How do you replace text in JavaScript with captured groups?

Capturing groups preserve parts of the match so the replacement can reuse them. In “Smith, Ada”.replace(/(\w+),\s*(\w+)/, “$2 $1”), group one captures Smith and group two captures Ada. The result is “Ada Smith”.

Replacement references begin with a dollar sign. $1 inserts the first captured group, $2 inserts the second, and $& inserts the complete match. Add g when the same grouped structure can occur more than once: text.replace(/(\w+),\s*(\w+)/g, “$2 $1”).

Use noncapturing parentheses, (?:…), for grouping that should not create a replacement reference. This keeps group numbers stable when the pattern becomes more complex.

How do callbacks compute replacements and escape literal input?

Pass a function instead of a replacement string when the output depends on the match. The callback receives the complete match first, followed by captured groups, the match position, and the complete input string.

For example, “item-7 item-12”.replace(/item-(\d+)/g, (match, number) => “product ” + Number(number)) returns “product 7 product 12”. The callback can format values, perform calculations, or choose different output for each match.

A regex pattern is different from escaped literal text. If user input is “a+b”, putting it directly into new RegExp(userInput, “g”) treats + as a regex operator rather than a literal character. For literal matching, use a string search or escape regex metacharacters first:

const escaped = userInput.replace(/[.*+?^${}()|[\]\\]/g, “\\$&”);

Then create the pattern with new RegExp(escaped, “g”). This preserves the input as literal text while still allowing global replacement.

To round a number in JavaScript, use Math.round() for the nearest integer: Math.round(4.6) returns 5. To round decimal places, multiply by a power of 10, round, then divide by the same factor. The method you choose matters for negative values, midpoint ties, and non-finite inputs.

JavaScript rounding methods return numeric values. They do not change the original variable unless you assign the result back to it.

How does rounding numbers in JavaScript work?

Math.round(value) selects the nearest integer. When a value is exactly halfway between integers, JavaScript rounds toward positive infinity. Therefore, Math.round(3.5) returns 4, while Math.round(-3.5) returns -3, not -4.

This comparison uses the same positive, negative, and midpoint inputs for each method. The values appear in this order: 3.7, -3.7, 3.5, -3.5.

• Math.round(): 4, -4, 4, -3
• Math.floor(): 3, -4, 3, -4
• Math.ceil(): 4, -3, 4, -3
• Math.trunc(): 3, -3, 3, -3

How do you round a JavaScript number to an integer?

To round a JavaScript number to an integer, choose the function that matches the desired direction:

• Math.round(value): nearest integer, with midpoint ties toward positive infinity.
• Math.floor(value): the next integer toward negative infinity. For example, Math.floor(-2.1) is -3.
• Math.ceil(value): the next integer toward positive infinity. For example, Math.ceil(-2.1) is -2.
• Math.trunc(value): removes the fractional portion toward zero. For example, Math.trunc(-2.9) is -2.

Floor and truncation are not equivalent for negative values: Math.floor(-2.9) returns -3, whereas Math.trunc(-2.9) returns -2.

How do you round decimal places in JavaScript?

For a simple decimal-place calculation, scale the number before rounding:

function roundTo(value, places) { const factor = 10 ** places; return Math.round(value * factor) / factor; }

roundTo(12.346, 2) returns 12.35. With two decimal places, the factor is 100: JavaScript rounds 12.346 × 100 to 1235, then divides by 100. Replace Math.round() with Math.floor(), Math.ceil(), or Math.trunc() when directional rounding is required.

Scaling also follows the selected method’s negative-number behavior. For example, scaling -12.346 by 100 and applying Math.round() produces -12.35; an exact negative midpoint follows Math.round’s tie rule.

Why do negative values and floating-point numbers surprise you?

Negative values expose the difference between direction and distance. Math.floor(-3.2) moves farther from zero to -4, while Math.trunc(-3.2) removes only the fraction and returns -3. Math.ceil(-3.2) also returns -3.

Decimal scaling has a floating-point limitation. JavaScript stores ordinary numbers in binary floating-point, so many decimal fractions are represented slightly above or below their written value. For example, Math.round(1.005 * 100) / 100 can return 1 because the scaled value may be just below 100.5.

For strict decimal rules, use integer units such as cents or decimal-aware arithmetic instead of assuming multiplication guarantees exact precision. Non-finite values pass through these methods: Math.round(NaN) returns NaN, Math.floor(Infinity) returns Infinity, Math.ceil(-Infinity) returns -Infinity, and Math.trunc(NaN) returns NaN.

Use fetch() to make a JavaScript API call with the browser’s built-in, promise-based request function. This guide shows how to call an API in JavaScript with async/await for GET and JSON POST requests.

An API call from JavaScript returns a promise, so await keeps the control flow readable while the browser waits for a response.

Build a JavaScript API call with fetch()

fetch() starts a request and returns a promise that resolves to a Response object. The complete async GET function below adds URL parameters, checks response.ok before parsing, and rethrows failures so calling code can handle them.

GET example: async function getUsers(limit, role) { try { const params = new URLSearchParams({ limit: String(limit), role }); const url = “https://api.example.com/users?” + params.toString(); const response = await fetch(url); if (!response.ok) { throw new Error(“GET failed: ” + response.status); } return await response.json(); } catch (error) { console.error(“Could not load users:”, error); throw error; } }

GET is the default HTTP method, so this request does not need an options object. await fetch(url) waits for the response promise, while await response.json() waits for the separate promise that parses the response body.

How to call an API in JavaScript with GET parameters

Place query parameters after a question mark in the URL. URLSearchParams creates that query string and encodes spaces and special characters safely. In the example, limit and role become parameters such as ?limit=10&role=admin.

Call the function with getUsers(10, “admin”). To set the method explicitly, pass a second argument to fetch(): fetch(url, { method: “GET” }). The server’s status is available through response.status, while response.ok is true only for successful 2xx responses.

Send JSON with POST requests and headers

Use POST when the request sends data to the server. Set the method to “POST”, identify the body as JSON with a Content-Type header, and convert the JavaScript object with JSON.stringify() before sending it.

JSON POST example: async function createUser(user) { try { const response = await fetch(“https://api.example.com/users”, { method: “POST”, headers: { “Content-Type”: “application/json”, “Accept”: “application/json” }, body: JSON.stringify(user) }); if (!response.ok) { throw new Error(“POST failed: ” + response.status); } return await response.json(); } catch (error) { console.error(“Could not create user:”, error); throw error; } }

For example, pass an object with createUser({ name: “Ada”, email: “[email protected]” }). The request headers tell the server how to interpret the body and what response format the client prefers.

Handle network, HTTP, and parsing errors

Handle these failures separately:

• Network errors: fetch() rejects when the request cannot be completed, such as when the network is unavailable or the request is blocked. The surrounding try…catch handles that rejection.
• HTTP errors: A 404 or 500 response does not automatically reject the fetch promise. The promise resolves normally, so check response.ok and throw an error when it is false.
• Parsing errors: response.json() returns a promise and rejects when the body is not valid JSON. Using return await response.json() inside the try block sends that failure to catch.

If an endpoint returns an empty or non-JSON body, use await response.text() instead of response.json().

sort in JavaScript uses the Array.prototype.sort() method. By default, it converts array elements to strings and orders their UTF-16 values, so string arrays often sort as expected but number arrays can produce surprising results.

For numbers, pass a comparator: (a, b) => a – b sorts ascending, while (a, b) => b – a sorts descending. The same comparator pattern works for numeric properties on objects.

How does sort in JavaScript behave by default for strings and numbers?

Without a comparator, sort() compares string representations. For example, [‘pear’, ‘apple’, ‘orange’].sort() returns [‘apple’, ‘orange’, ‘pear’]. Uppercase and lowercase characters can appear in separate groups because their character codes differ.

The same rule causes numeric errors. [10, 2, 1, 21].sort() becomes [1, 10, 2, 21], because the values are compared as ’10’, ‘2’, ‘1’, and ’21’. Use a numeric comparator whenever the array contains numbers. Default sorting is appropriate only when its string-based ordering matches the intended result.

How does a JavaScript numeric sort handle ascending and descending values?

A comparator receives two elements, a and b. A negative return value places a before b; a positive value places b first; zero treats them as equal. This return-value contract lets JavaScript calculate numeric order directly.

For ascending order, subtract the second value from the first:

const ascending = numbers.sort((a, b) => a – b);

If a is smaller than b, the result is negative, so a moves earlier. If a is larger, the result is positive, so it moves later. This is the standard JavaScript numeric sort for low-to-high values.

To sort descending in JavaScript, reverse the subtraction:

const descending = numbers.sort((a, b) => b – a);

Now a larger value produces a negative result and moves toward the start of the array. Both calls mutate numbers; use a copy when the original order matters.

How do you sort objects by a property?

For objects, the comparator should read the property used for ordering. This example sorts players by a numeric score from lowest to highest:

players.sort((a, b) => a.score – b.score);

For highest to lowest, switch the operands:

players.sort((a, b) => b.score – a.score);

String properties need a string comparator. For example, players.sort((a, b) => a.name.localeCompare(b.name)) orders names alphabetically according to the available locale rules. For descending names, compare b.name with a.name. Keep the property types consistent so the comparator returns reliable results.

What changes when sort() mutates, and when should you use toSorted()?

sort() changes the existing array and returns that same array. Declaring the array with const does not prevent this mutation; it only prevents assigning a different array to the variable.

Copy the array before sorting when other code needs the original order:

const ascending = […numbers].sort((a, b) => a – b);

toSorted() provides the non-mutating alternative in modern JavaScript. It returns a new sorted array while leaving the source unchanged:

const descending = numbers.toSorted((a, b) => b – a);

Use sort() when changing the current array is intentional. Use toSorted(), or a spread copy followed by sort(), when immutability is required.