Convert Tab Characters to Spaces Online Convert tab characters to spaces with configurable tab width.

The converter's core logic relies on the `replace()` method of JavaScript strings, utilizing a regular expression (`/\t/g`) to match all tab characters (U+0009) in the input text. This regex pattern includes the global flag (`g`), ensuring that every occurrence of a tab is replaced, not just the first one. The replacement string is generated by `' '.repeat(spaces)`, where `spaces` is a variable holding the number of spaces to use for each tab, settable via radio buttons in the user interface, which are handled through React's `useState` and `useCallback` hooks.

Under the hood, when a user selects a new number of spaces per tab using the radio buttons, React updates the component's state by calling `setSpaces(n)`, where `n` is the selected number of spaces. This update triggers a re-render of the component, ensuring that the `onProcess` callback function uses the latest value of `spaces`. The TextToolLayout component, which wraps the converter's UI and logic, handles the input text processing by calling `onProcess` with the user-provided input string.

The tool does not rely on any external libraries or browser APIs beyond what is provided by React and standard JavaScript. It operates solely on strings, without involving any file I/O or complex data structures, keeping its operation straightforward and efficient for converting tabs to spaces in text. The `repeat()` method used to generate the replacement string is a part of the JavaScript standard library, introduced in ECMAScript 2015 (ES6), making it widely supported across modern browsers.

The generated HTML for the radio buttons uses the `map()` function to iterate over an array of possible tab widths (`[2, 4, 8]`), creating a label and input element for each option. This approach allows for easy modification or extension of the available tab widths by simply altering the array passed to `map()`. Each radio button's `checked` state is managed through React's conditional rendering, ensuring that only the currently selected option is marked as checked in the DOM.

When processing the input text, the tool treats all tabs equally, replacing each one with the specified number of spaces without considering any context or semantic meaning of the tab characters. This approach is sufficient for most code formatting tasks but may not be ideal for all possible use cases, such as converting tabs within inline text where visual alignment matters. The simplicity of this replacement strategy makes it easy to understand and predict its behavior, which is beneficial for a tool intended to standardize indentation in source code files.