Скачать или смотреть How to Easily Replace Characters in a String with JavaScript

Learn how to replace 14 characters in a string after the first 10 using JavaScript in a simple, step-by-step guide.
---
This video is based on the question https://stackoverflow.com/q/71431691/ asked by the user 'user3261093' ( https://stackoverflow.com/u/3261093/ ) and on the answer https://stackoverflow.com/a/71431777/ provided by the user 'DCR' ( https://stackoverflow.com/u/4398966/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Replace next 14 characters with X after the first 10 characters

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
A Simple Solution to Replace Characters in a String Using JavaScript

In web development, we often encounter situations where we need to manipulate strings for various purposes. One common problem is needing to obscure part of a string for privacy or data handling reasons. Today, we will tackle a specific challenge: replacing 14 characters in a string after the first 10 characters with X using JavaScript.

Let’s take a closer look at how to achieve this.

The Problem

You have a span tag containing a string made up of 34 randomly generated letters and numbers. For instance, you may want to transform:

[[See Video to Reveal this Text or Code Snippet]]

To look like this:

[[See Video to Reveal this Text or Code Snippet]]

In this transformation, we want the first 10 characters to remain unchanged while replacing the next 14 characters with X.

The Solution

Step-by-step Breakdown

Select the Span Element: Use document.querySelector to target and select the specific span tag.

Extract Portions of the String:

First, capture the first 10 characters.

Then, create a string of 14 X characters.

Finally, take the remaining characters after the 24th position (since we replaced 14 after the 10).

Reconstruct the String: Concatenate the first part, the X string, and the final part together.

Update the Inner Text: Set the new string back into the span element.

Here is the JavaScript code that performs all these steps:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

document.querySelector('span'): This selects the first <span> element in the document.

.substr(0, 10): This function retrieves a substring starting from index 0 through index 10, effectively capturing the first 10 characters.

"xxxxxxxxxxxxxx": A simple string containing 14 characters of X.

.substr(24): This captures all characters from index 24 to the end of the string.

Finally, we concatenate all parts (left, center, right) and assign the new string back to the innerText of the span.

Conclusion

By following this guide, you can easily replace characters in a string with JavaScript. This technique comes in handy for various applications, whether you're verifying user data, obscuring sensitive information, or just customizing how displayed text looks on your web pages.

Incorporate this straightforward method into your JavaScript toolbox and simplify your string manipulation tasks!