background
I like to collect some domain names for sale in my spare time. I usually make some domain name parking pages and the like. If I want to maximize the display of domain names, I have to deploy domain name parking pages in various environments. There are free ones and some Fees are charged. Of course, if you support php or similar dynamic language scripts, getting the main domain name is much simpler. Some free pages only support html/js code. In order to get the current main domain name through url or host header, adapt to various Various environments, decided to use js to achieve!
Purpose
Encapsulate a js method to achieve the following goals, such as:
pass in "abc.erji.domain.com.cn" and get "domain.com.cn"
correctly pass in "abc.erji.domain.com" and get " domain.com"
into "erji.domain.com.cn" Get "domain.com.cn" correctly into "domain.com.cn"
Get "domain.com.cn"
into "www.domain " .com" correctly obtained "domain.com"
passed in "domain.com" correctly obtained "domain.com"
Let's take a look at this method first
function getMainHost(domains) {
let key = `mh_${
Math.random()}`;
let keyR = new RegExp(`(^|;)\\s*${
key}=12345`);
let expiredTime = new Date(0);
let domain = domains ? domains : location.hostname;//如果有传入域名,则使用传入的域名,如果没有传入,则获取当前URL的主机名
let domainList = domain.split('.');
let urlItems = [];
// 主域名一定会有两部分组成
urlItems.unshift(domainList.pop());
// 慢慢从后往前测试
if(domains) {
urlItems.unshift(domainList.pop());
let mainHost = urlItems.join('.');
return mainHost;
} else {
while(domainList.length) {
urlItems.unshift(domainList.pop());
let mainHost = urlItems.join('.');
let cookie = `${
key}=${
12345};domain=.${
mainHost}`;
document.cookie = cookie;
//如果cookie存在，则说明域名合法
if(keyR.test(document.cookie)) {
document.cookie = `${
cookie};expires=${
expiredTime}`;
return mainHost;
}
}
}
}
After testing, if a second-level domain name like www.domain.com.cn is passed in, the result is com.cn, which is obviously not the result we want.
Optimize it:
//方法
function getMainHost(host) {
//需要先看是不是二级域名,如com.cn , org.cn , net.cn
var domain = host.match(/[\w-]+\.(com\.cn|org\.cn|net\.cn|com|net|org|gov|cc|biz|info|cn|co)/);
return domain[0];
}
//调用
console.log(getMainHost("domain.com"));//输出 domain.com
console.log(getMainHost("domain.com.cn"));//输出 domain.com.cn
console.log(getMainHost("www.domain.com.cn"));//输出 domain.com.cn
最后,送上一个截取url中"//"开头至第一个":/"之间的主体部分字符的正则表达式
For example: https://www.domain.com.cn:808/html/html-1.html to get www.domain.com.cn
(?<=//)[\w\.]+[^:/]
//其他测试
(\w*\.(?:com\.cn|cn|com|net))
(\w*\.(?:com\.cn|cn|com|net|cc|[^\/.+]))
var host = "https://www.baidu.com/sfds";
var host = host.replace(/http[s]{0,1}:\/\/.*?([^\.]+\.(com\.cn|org\.cn|net\.cn|[^\.]+))\/.+/, "$1");
// baidu.com
效验url是否符合规则
方法一：
/(http|https):\/\/([\w.]+\/?)\S*/
这个方法的特点是可以提取出协议名；
方法二：
/http[s]{
0,1}:\/\/([\w.]+\/?)\S*/
这个方法的特点是不提取出协议名；
当然正则表达式非常灵活，方法远不止这两种，这里仅挑了两个常见的方法。
The following is a self-feeling super beautiful domain name sale page that I made. The finished product is pure html+css+js
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>您正在访问的域名正在出售！ This domain name is for sale !</title>
<meta name="description" content="铂金米 BoJinMi.com 已备案域名出售展示平台,域名库 Yumingku.net 提供各大接入商已备案接入域名查询注册购买!">
<style type="text/css">
body {
color: #aaaaaa;
/*background-color: #222;*/
background: #494A5F;
font-weight: 500;
font-size: 1.5em;
font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
}
div.container {
text-align: center;
margin: 0px;
}
h1 {
font-size: 64px;
text-align: center;
font-weight: 300;
padding: .5em;
margin: 0;
}
h2 {
font-size: 24px;
text-align: center;
font-weight: 300;
margin: 0;
}
body nav {
text-align: center;
margin-top: 60px;
margin-bottom: 40px;
position: relative;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
color: #de6b00;
text-decoration: none;
}
a:hover {
color: #e40505;
}
li a {
display: block;
font-size: 20px;
text-align: center;
padding: 10px 15px;
}
li a:hover {
transform: rotate(5deg) scale(1.1);
}
li a:hover:before,
li a:hover:after {
transition: all 0.3s ease;
opacity: 1;
width: 20px;
}
li a:before,
li a:after {
opacity: 0;
border-top: 1px solid white;
content: '';
display: block;
position: relative;
z-index: -1;
margin: auto;
width: 0px;
}
li a:before {
top: 0px;
transform: rotate(120deg) translateY(-50%) translateX(-50%);
}
li a:after {
top: 5px;
transform: rotate(-60deg) translateY(-50%) translateX(-50%);
}
.spm {
margin: 20px auto;
padding: 20px;
width: 75%;
display: block;
background: #fff;
box-shadow: 0 1px 3px #d4e6dd;
}
.spm h3 {
font-size: 18px;
line-height: 24px;
margin-bottom: 10px;
font-weight: normal;
}
.spm h3 i {
font-size: 18px;
margin-right: 5px;
}
.spm h3 span {
float: right;
font-size: 12px;
font-weight: 400
}
.spm h3 span i {
font-size: 12px;
margin-right: 0;
}
.spm h3 span a {
color: #888
}
.spm div,
.spm p {
line-height: 200%;
}
.spm img {
max-width: 100%;
height: auto;
width: auto;
min-width: inherit;
display: inline
}
.spm .weburl {
float: right;
font-size: 12px;
border: 1px #9ad4b7 solid;
padding: 0 5px;
height: 20px;
line-height: 20px;
border-radius: 4px;
font-weight: 400;
overflow: hidden;
display: block;
margin-left: 10px
}
.spm .weburl i {
margin-right: 5px;
font-size: 12px
}
.spm .weburl a {
color: #9ad4b7;
margin-right: 0
}
/**正在出售***/
.sell-head {
margin: 10px;
text-align: center;
opacity: 1;
-webkit-transition: all .6s ease-out 0s;
}
.sell-head-title {
position: relative;
width: auto;
padding-bottom: 4px;
margin: 0 auto;
font-weight: 100
}
.sell-head-title:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #a0ce4e;
background-image: linear-gradient(to right, #fff 0, #a0ce4e 30%, #a0ce4e 70%, #fff 100%);
opacity: .6;
content: ""
}
.sell-desc {
font-size: 16px;
height: auto;
text-align: center;
}
.sell-desc img {
float: left;
width: 25%;
padding: 0 1% 0 0;
}
.sell-desc .button {
line-height: 70px;
padding: 9px 22px;
background-color: #f60;
color: #fff;
white-space: nowrap;
text-align: center;
font-size: 15px;
border-radius: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<nav>
<ul>
<li><img src="http://img.chaicp.com/user/43225/20205271321049284.png"></li>
<li><a target="_blank" href="http://www.yumingku.net/ykj">更多域名</a></li>
<li><a target="_blank" href="http://www.yumingku.net/ykj/?t=csy&tt=43225&ymbhfs=1&ymbh=43225">我的米表</a></li>
<li><a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=LBUVHhweFRQVHmxdXQJPQ0E">邮箱：[email protected]</a></li>
</ul>
</nav>
</div>
<div class="spm">
<div class="container">
<div class="sell-head clearfix">
<h2 class="sell-head-title">该域名正在出售</h2>
<p class="sell-sub-title">This domain name is for sale !</p>
</div>
<div class="sell-desc">
<p>您正在访问（输入）的域名可以转让!</p>
<p> <a class="button" href="#">QQ99882620</a> <a class="button" href="#">微信:sncdma</a> <a id="yikoujia" class="button" target="_blank" href="http://www.yumingku.net/ykj">直接购买</a> </p>
<p>如果您对该域名感兴趣，且直接购买提示域名不存在,请直接联系QQ99882620提供您的报价。</p>
<p>If you are interested in this domain name and the direct purchase prompts that the domain name does not exist, please contact QQ99882620 directly to provide your quotation.</p>
</div>
</div>
</div>
<script language="javascript">
//获取域名
var host = location.hostname;
var host = getMainHost(host);
var title = host + ' 该域名正在出售！ This domain name is for sale !';
document.title = title;
var yuming = getclass('sell-head-title');
yuming[0].innerHTML = host + '正在出售';
//根据id获取超链接,设置href属性
// var weituo = document.getElementById("weituo");
// weituo.href = "http://www.yumingku.net/user_zhongjie_add.htm?ym=" + host + "&tt=43225&t=tiao_" + host;
// var weituo1 = document.getElementById("weituo1");
// weituo1.href = "http://www.yumingku.net/user_zhongjie_add.htm?ym=" + host + "&tt=43225&t=tiao_" + host;
//根据id获取超链接,设置文字内容
//weituo.innerText = "委托购买";
var yikoujia = document.getElementById("yikoujia");
yikoujia.href = "http://www.yumingku.net/mai-yes.htm?ym=" + host;
function getMainHost(host) {
var domain = host.match(/[\w-]+\.(com\.cn|org\.cn|net\.cn|com|net|org|gov|cc|biz|info|cn|co)/);
return domain[0];
}
function getclass(classn) {
//创建函数 传入形参
if(!document.getElementsByClassName) {
//判断document.getElementsByClassName方法是否支持
var list = document.getElementsByTagName("*"); //先取得所有的dom标签元素
var temp = []; //创建临时数组
for(var i = 0; i < list.length; i++) {
//循环每一个dom元素
if(list[i].className == classn) {
//判断当前这个元素的class名称是否等于box
temp.push(list[i]) //如果等于，将该元素添加到数组中去
}
}
return temp; //；返回给函数
} else {
return document.getElementsByClassName(classn);
}
}
console.log('不要扒了,详细的注释在这片文章 https://blog.csdn.net/Sncdma/article/details/106388512')
</script>
</body>
</html>