Introduction of Title-to-URL Generator

“Title to URL” is a web-based tool that helps users to create and normalize URLs for their articles based on the title and date, designed with clean HTML, CSS, and JavaScript to create an easy-to-use user interface. The tool allows users to input the article title and select the month and day, and generates a normalized URL that follows the practices for URL structure and readability in popular CMS platforms (such as WordPress). The app allows users to input their domain address, article title, and choose between two options to generate a URL in a specific format.

---

Domain address:
Article title:
Use Date
Year: 2023 2024 2025 2026 2027 2028 2029 2030
Month: 1 2 3 4 5 6 7 8 9 10 11 12
Day: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Use Subdirectory
Subdirectory:

---

The two options are:

1. Using Date method (year, month, and day)
2. Using Subdirectory method

Usage

To use the “Title to URL” URL Generator, simply input your domain address, article title, and select the preferred URL format option. Then, click the “Generate URL” button to display the generated URL on the page.

Features

• Responsive design
• Clean and intuitive user interface
• Two URL format options: date or subdirectory
• Form validation and error handling

Dechnical details

{
        // Replace any non-alphanumeric characters with a hyphen, except for apostrophes
        title = title.replace(/[^\w\s']+/g, '-');
        // Replace apostrophes with an empty string
        title = title.replace(/'/g, '');
        // Replace whitespace with a hyphen
        title = title.replace(/\s+/g, '-');
        // Remove any consecutive hyphens
        title = title.replace(/--+/g, '-');
        // Remove any leading or trailing hyphens
        title = title.replace(/^-|-$/g, '');
        // Convert the title to lowercase
        title = title.toLowerCase();
}

This code replaces non-alphanumeric characters with a hyphen, apostrophes with an empty string, whitespace with a hyphen, removes consecutive hyphens, removes leading and trailing hyphens, and converts the title to lowercase. It is typically used in URL normalization process.

Example of Output

An example of a generated URL using the “Use Date” option:

https://www.example.com/2023/04/08/my-article-title/

An example of a generated URL using the “Use Subdirectory” option:

https://www.example.com/blog/my-article-title/

License

This project is licensed under the Apache 2.0 License.

Credit

This app was created by by [YIN Renlong]. - Feel free to use and modify this code for your projects, but please give credit to the original author.

Acknowledgement

Thanks to the “Architect” theme for Github Page.