Merge pull request #208

feat: add custom URL encoder and decoder with full percent-encoding support

Author: iib0011

public/locales/en/string.json

@@ -257,5 +257,31 @@
     "resultTitle": "Uppercase text",
     "shortDescription": "Convert text to uppercase",
     "title": "Convert to Uppercase"
+  },
+  "urlEncode": {
+    "toolInfo": {
+      "description": "Load your string and it will automatically get URL-escaped.",
+      "shortDescription": "Quickly URL-escape a string.",
+      "longDescription": "This tool URL-encodes a string. Special URL characters get converted to percent-sign encoding. This encoding is called percent-encoding because each character's numeric value gets converted to a percent sign followed by a two-digit hexadecimal value. The hex values are determined based on the character's codepoint value. For example, a space gets escaped to %20, a colon to %3a, a slash to %2f. Characters that are not special stay unchanged. In case you also need to convert non-special characters to percent-encoding, then we've also added an extra option that lets you do that. Select the encode-non-special-chars option to enable this behavior.",
+      "title": "String URL encoder"
+    },
+    "encodingOption": {
+      "title": "Encoding Options",
+      "nonSpecialCharPlaceholder": "Encode non-special characters",
+      "nonSpecialCharDescription": "If selected, then all characters in the input string will be converted to URL-encoding (not just special)."
+    },
+    "inputTitle": "Input String",
+    "resultTitle": "Url-escaped String"
+  },
+  "urlDecode": {
+    "toolInfo": {
+      "description": "Load your string and it will automatically get URL-unescaped.",
+      "shortDescription": "Quickly URL-unescape a string.",
+      "longDescription": "This tool URL-decodes a previously URL-encoded string. URL-decoding is the inverse operation of URL-encoding. All percent-encoded characters get decoded to characters that you can understand. Some of the most well known percent-encoded values are %20 for a space, %3a for a colon, %2f for a slash, and %3f for a question mark. The two digits following the percent sign are character's char code values in hex.",
+      "title": "String URL decoder"
+    },
+
+    "inputTitle": "Input String(URL-escaped)",
+    "resultTitle": "Output string"
   }
 }

src/pages/tools/string/index.ts

@@ -18,6 +18,8 @@ import { tool as stringBase64 } from './base64/meta';
 import { tool as stringStatistic } from './statistic/meta';
 import { tool as stringCensor } from './censor/meta';
 import { tool as stringPasswordGenerator } from './password-generator/meta';
+import { tool as stringEncodeUrl } from './url-encode/meta';
+import { tool as StringDecodeUrl } from './url-decode/meta';
 
 export const stringTools = [
   stringSplit,
@@ -39,5 +41,7 @@ export const stringTools = [
   stringBase64,
   stringStatistic,
   stringCensor,
-  stringPasswordGenerator
+  stringPasswordGenerator,
+  stringEncodeUrl,
+  StringDecodeUrl
 ];

src/pages/tools/string/url-decode/index.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { decodeString } from './service';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolContent from '@components/ToolContent';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import { useTranslation } from 'react-i18next';
+
+const initialValues = {};
+
+const exampleCards: CardExampleType<typeof initialValues>[] = [
+  {
+    title: 'Decode an actual URL',
+    description:
+      'This example decodes a URL-encoded string back to its readable URL form.',
+    sampleText: 'https%3A%2F%2Fomnitools.app%2F',
+    sampleResult: 'https://omnitools.app/',
+    sampleOptions: initialValues
+  },
+  {
+    title: 'Decode All Characters',
+    description:
+      'This example decodes a string where every character has been URL-encoded, restoring the original readable text.',
+    sampleText:
+      '%49%20%63%61%6E%27%74%20%62%65%6C%69%65%76%65%20%69%74%27%73%20%6E%6F%74%20%62%75%74%74%65%72%21',
+    sampleResult: "I can't believe it's not butter!",
+    sampleOptions: initialValues
+  }
+];
+
+export default function DecodeString({
+  title,
+  longDescription
+}: ToolComponentProps) {
+  const { t } = useTranslation('string');
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+
+  function compute(_initialValues: typeof initialValues, input: string) {
+    setResult(decodeString(input));
+  }
+
+  return (
+    <ToolContent
+      title={title}
+      initialValues={initialValues}
+      getGroups={null}
+      compute={compute}
+      input={input}
+      setInput={setInput}
+      inputComponent={
+        <ToolTextInput
+          title={t('urlDecode.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
+      }
+      resultComponent={
+        <ToolTextResult title={t('urlDecode.resultTitle')} value={result} />
+      }
+      toolInfo={{
+        title: t('urlDecode.toolInfo.title', { title }),
+        description: longDescription
+      }}
+      exampleCards={exampleCards}
+    />
+  );
+}

src/pages/tools/string/url-decode/meta.ts

@@ -0,0 +1,16 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('string', {
+  path: 'url-decode-string',
+  icon: 'codicon:symbol-string',
+
+  keywords: ['uppercase'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'string:urlDecode.toolInfo.title',
+    description: 'string:urlDecode.toolInfo.description',
+    shortDescription: 'string:urlDecode.toolInfo.shortDescription',
+    longDescription: 'string:urlDecode.toolInfo.longDescription'
+  }
+});

src/pages/tools/string/url-decode/service.ts

@@ -0,0 +1,4 @@
+export function decodeString(input: string): string {
+  if (!input) return '';
+  return decodeURIComponent(input);
+}

src/pages/tools/string/url-encode/index.tsx

@@ -0,0 +1,98 @@
+import { Box } from '@mui/material';
+import { useState } from 'react';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { encodeString } from './service';
+import ToolTextInput from '@components/input/ToolTextInput';
+import { InitialValuesType } from './types';
+import ToolContent from '@components/ToolContent';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import { useTranslation } from 'react-i18next';
+
+const initialValues: InitialValuesType = {
+  nonSpecialChar: false
+};
+
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'Encode an actual URL',
+    description:
+      'This example URL-encodes a string that also happens to be a valid web link. Special characters in this example are a colon, slash, question mark and equals sign.',
+    sampleText: 'https://omnitools.app/',
+    sampleResult: 'https%3A%2F%2Fomnitools.app%2F',
+    sampleOptions: initialValues
+  },
+  {
+    title: 'Encode All Characters',
+    description:
+      "In this example, we've enabled the option that encodes absolutely all characters in a string to URL-encoding. This option makes non-special characters, such as letters get encoded to their hex codes prefixed by a percent sign.",
+    sampleText: "I can't believe it's not butter!",
+    sampleResult:
+      '%49%20%63%61%6E%27%74%20%62%65%6C%69%65%76%65%20%69%74%27%73%20%6E%6F%74%20%62%75%74%74%65%72%21',
+    sampleOptions: {
+      nonSpecialChar: true
+    }
+  }
+];
+
+export default function EncodeString({
+  title,
+  longDescription
+}: ToolComponentProps) {
+  const { t } = useTranslation('string');
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+
+  function compute(initialValues: InitialValuesType, input: string) {
+    setResult(encodeString(input, initialValues));
+  }
+
+  const getGroups: GetGroupsType<InitialValuesType> = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: t('urlEncode.encodingOption.title'),
+      component: (
+        <Box>
+          <CheckboxWithDesc
+            checked={values.nonSpecialChar}
+            onChange={(value) => updateField('nonSpecialChar', value)}
+            title={t('urlEncode.encodingOption.nonSpecialCharPlaceholder')}
+            description={t(
+              'urlEncode.encodingOption.nonSpecialCharDescription'
+            )}
+          />
+        </Box>
+      )
+    }
+  ];
+
+  return (
+    <ToolContent
+      title={title}
+      initialValues={initialValues}
+      getGroups={getGroups}
+      compute={compute}
+      input={input}
+      setInput={setInput}
+      inputComponent={
+        <ToolTextInput
+          title={t('urlEncode.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
+      }
+      resultComponent={
+        <ToolTextResult title={t('urlEncode.resultTitle')} value={result} />
+      }
+      toolInfo={{
+        title: t('urlEncode.toolInfo.title', { title }),
+        description: longDescription
+      }}
+      exampleCards={exampleCards}
+    />
+  );
+}

src/pages/tools/string/url-encode/meta.ts

@@ -0,0 +1,16 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('string', {
+  path: 'url-encode-string',
+  icon: 'ic:baseline-percentage',
+
+  keywords: ['uppercase'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'string:urlEncode.toolInfo.title',
+    description: 'string:urlEncode.toolInfo.description',
+    shortDescription: 'string:urlEncode.toolInfo.shortDescription',
+    longDescription: 'string:urlEncode.toolInfo.longDescription'
+  }
+});

src/pages/tools/string/url-encode/service.ts

@@ -0,0 +1,18 @@
+import { InitialValuesType } from './types';
+
+export function encodeString(
+  input: string,
+  options: InitialValuesType
+): string {
+  if (!input) return '';
+  if (!options.nonSpecialChar) {
+    return encodeURIComponent(input);
+  }
+
+  let result = '';
+  for (const char of input) {
+    const hex = char.codePointAt(0)!.toString(16).toUpperCase();
+    result += '%' + hex.padStart(2, '0');
+  }
+  return result;
+}

src/pages/tools/string/url-encode/types.ts

@@ -0,0 +1,3 @@
+export type InitialValuesType = {
+  nonSpecialChar: boolean;
+};