Remove .html from url javascript

Question

Using javascript you can achieve this like:

Nội dung chính Show

Solution 1 – Put pages in folders
Solution 2 – remove the HTML extension with a .htaccess redirect
Can I remove .html from URL?
Why does my URL have HTML at the end?

var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
if (a.indexOf('html') > -1) { //Check of html String in URL.
   url = url.substring(0, newURL.lastIndexOf("."));
}

If you are looking at Server level changes, Below are the rules for .htaccess file

RewriteEngine On

# remove trailing slash
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([^/]+)/$ http://example.com/folder/$1 [R=301,L]

# Redirect external .html requests to extensionless url
RewriteCond %{THE_REQUEST} ^(.+)\.html([#?][^\ ]*)?\ HTTP/
RewriteRule ^(.+)\.html$ http://example.com/folder/$1 [R=301,L]

# Resolve .html file for extensionless html urls
RewriteRule ^([^/.]+)$ $1.html[L]

View Discussion

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

All the pages on the website have a structure which is given by HTML. HTML provides the structure to content, text, tables, headings, and lists on the webpage that makes the page easy to read. While saving an HTML document it has an extension as .html. Therefore, the URL of the website have a .html extension. The .html extension can be easily removed by editing the .htaccess file.

.htaccess file: The .htaccess file is created with a Text Editor like Notepad. It is a simple ASCII file that lets the server know what configuration changes are to be made on a per-directory basis.

Note: The .htaccess is the full name of the file. It is not file.htaccess, it is simply .htaccess.

Removing .html Extension: To remove the .html extension from a URL. For example:
From

example.com/content.html

To

example.com/content

You have to follow these steps:

Log in to cPanel account.
In the Files section, click on the File Managericon.
Click on the Settings Button in the top right corner.
If you want to make changes in the Primary Domain then Click on the radio button next to the Web Root. If changes are to be made on Other Domains, then Click the dropdown menu and find the domain in which changes are to be made.
Remember to check the checkbox next to Show Hidden Files. Now click the Save Button to return to the File Manager window.
Now you are in the Root Folder of the domain which you have selected to make changes. Search for the .htaccess file and right-click on it. Click on the Edit option in the menu. You can now add code to the .htaccess file.
Add the following code inside the .htaccess file:

HTML

Click on the Save Changes Button and then on Close Button.

You can now link any page inside the HTML document without needing to add the extension of the page as no extension will be visible now in the URL of the website.

Example:

<a href="http://example.com/image" title="image">image</a>

The search engine may index these pages as duplicate content, to overcome this add a <canonical> meta tag in the HTML file.

Example:

<link rel="canonical" href="https://example.com/blog/first-blog" />

I was recently asked how to remove the HTML extension from a URL on a webpage. I provided some quick advice on how to do this, but thought it would be good to write a post on how to do it.

If you don’t know what I’m talking about here, it’s when you visit a website and the URL looks something like this – https://example.com/about.html. Specifically, the .html part is the problem here as most people would prefer to see https://example.com/about instead. It’s nicer, don’t you think?

There are a couple of ways to remove the HTML extension from a URL, so let’s go through a couple of them, shall we? To help me along, I’ve spun up a quick test site using Simple.css. It looks something like this:

Notice the URL in the address bar – https://test.kq.md. Let’s visit the about page and see what happens…

Ahhhhh my eyes! 🤮 Look at that horrible mess! https://test.kq.md/about.html is no good. The first solution for removing the HTML extension from the URL is simple – put the page in a folder.

Solution 1 – Put pages in folders

The test site I’ve made is currently flat and has no folder structure. So it looks like this:

|-- 📄 index.html
|-- 📄 about.html

In order to change /about.html to /about simply create a folder called about, move about.html into that folder and rename it to index.html. Once those changes are made, the new folder structure should look something like this:

|-- 📄 index.html
|-- 📁 about
     |-- 📄 index.html

After making that change, let’s revisit the about page and see what’s happened to the URL:

Look at that URL, folks! There’s no file extension to be seen. Can we just bask in the glory of what we have accomplished for a second here please?

This is how many static site generators, like Jekyll, generate their pages. Everything is in its own sub-folder and therefore have no file extensions in sight.

So, basking complete; we’re feeling good. Our mojo is strong and all is well in the world. Well, all is well if you only have a couple of pages on your website. What if you have a blog with tens, or even hundreds of pages? It may not be feasible to restructure your entire site to remove the HTML extension from your URLs.

Solution 2 – remove the HTML extension with a .htaccess redirect

An alternative solution is to use your web server’s .htaccess file in order to remove the file extension from the URL. This is done very simply in just a few lines of code:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+)/$ $1.html
RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [R=301,L]

What this snippet of code is doing, is stripping out .html from the URL path. It will also redirect anyone who visits a URL with .html appended to it, so you shouldn’t get any 404 errors if people visit the full URL.

Conclusion

That’s it, we’re done! With either of these solutions you should be able to remove the HTML extension from all of your URLs and rid yourself of all that ugliness.

Per my disclaimer, this is just how I’ve managed to accomplish this myself. Do you have a better way? If so, please let me know.

If you’re hosting your site with Netlify, you could cut out this process completely and use their in-built option for removing file extensions. This post by Ryan Moore shows you how.

Can I remove .html from URL?

html extension can be easily removed by editing the . htaccess file.

Why does my URL have HTML at the end?

. html extension means that page contains only front-end code and does not have any server side language included in it (I'm not talking about URL rewriters that adds .

programming javascript Express remove html URL without HTML Vercel remove HTML Replace URL JavaScript