URL Encoder (Full Percent-Encoding) Percent-encode all special characters in a URL string.

The tool works by first using JavaScript's encodeURIComponent function to encode all characters except unreserved ones, such as A-Z, a-z, 0-9, -, _, ., ~, and some special characters like !, *, ', (, ). This initial encoding step follows the standard defined in RFC 3986. However, it then takes an additional step by using a regular expression to replace certain characters, including !, *, and ', with their corresponding percent-encoded values. This replacement is done using the charCodeAt method to get the Unicode value of each character, which is then converted to its uppercase hexadecimal representation using toString(16) and prepended with a % symbol.

In terms of data structures, the input string is processed as a sequence of UTF-8 encoded bytes, where multi-byte characters are handled correctly by encodeURIComponent. The use of React's useCallback hook ensures that the onProcess function is only recreated when necessary, which can help improve performance by reducing unnecessary re-renders. When processing the input string, it uses the replace method with a callback function to iterate over each match of the regular expression, allowing for efficient replacement of characters without having to manually loop through the entire string.

The tool's implementation relies on the TextToolLayout component from the '@/components/shared' module, which provides a basic structure for text-based tools. This component expects an inputLabel, outputLabel, and onProcess function as props, where the onProcess function is responsible for performing the actual encoding operation. By using this modular approach, it becomes easier to reuse and maintain the codebase, especially when working with multiple related tools that share similar functionality. Error handling is also implemented using a try-catch block, which catches any exceptions thrown during the encoding process and returns an error message instead of crashing the application.

The encoding process itself involves converting each unsafe character into its corresponding percent-encoded representation, where spaces are encoded as %20 and non-ASCII characters are represented as multi-byte UTF-8 sequences. This results in a safely encoded string that can be used in URLs without risking data corruption or parsing errors. The use of React's client-side rendering capabilities ensures that the encoding process occurs on the client-side, reducing the load on servers and improving overall performance.