首页 > 其他分享 >纯前端获取当前用户IP和归属地

纯前端获取当前用户IP和归属地

时间:2023-07-25 10:35:59浏览次数:35  
标签:ip trim arr IP 前端 let text ipAddress 归属

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IP Address</title>
</head>
<body>
<p id="content1"></p>
<p id="content2"></p>
<script>
    function getIpAddress() {
        let year = new Date().getFullYear();
        fetch(`https://${year}.ip138.com/`).then(x => x.text()).then(h => {
            let domParser = new DOMParser();
            let doc = domParser.parseFromString(h,"text/html");
            let text = doc?.querySelector('p')?.innerText?.trim();
            document.getElementById('content1').innerText = text;
            let ipAddress = {ip: "", location: "", type: ""}
            try {
                let ip = text.substring(text.indexOf("[")+1,text.indexOf("]")).trim();
                ipAddress.ip = ip;
                let other = text.substring(text.indexOf("来自:")+3).trim();
                let arr = other.split(" ");
                ipAddress.location = arr[0];
                ipAddress.type = arr[1];
            }catch (e) {
                console.error(e)
            }
            document.getElementById('content2').innerText = JSON.stringify(ipAddress);
        })
    }

    getIpAddress();
</script>
</body>
</html>

标签:ip,trim,arr,IP,前端,let,text,ipAddress,归属
From: https://www.cnblogs.com/xiaogblog/p/17579099.html

相关文章

  • Typescript:基础语法学习(尚硅谷 李立超)
    官方文档:https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html搭建开发环境npmi-gtypescript安装完成界面:查看是否安装完成,输入以下命令:tsc执行命令:node文件名``编译代码tsc01_HelloTs.ts基础语法变量声明//生命一个变量a,同时指定他的类型为number......
  • 前端03
    1、JS可以控制web前端的哪两个?html和css2、写一个普通按钮,使用js设置鼠标移入的时候,弹出“鼠标移入”;<!DOCTYPEhtml><html><head> <title>按钮示例</title> <style>  .my-button{   padding:10px20px;   background-color:#eaeaea;   bor......
  • IPFS开发
    服务端下载https://github.com/ipfs/ipfs-desktop/releasesWindows版本是下载exe的安装程序。服务端安装安装的步骤参照官方的说明文档,应该是默认安装就可以了。https://docs.ipfs.tech/install/ipfs-desktop/#windowsIPFS客户端Nuget包的安装Install-PackageIpfs.Http.C......
  • hadoop-eclipse开发环境搭建及error: failure to login错误
    对于Hadoop开发者来讲,通过JAVAAPI编程是进入Map-Reduce分布式开发的第一步。由于Eclipse本身并没有提供对MapReduce编程模式的支持,所以需要一些简单的步骤来实现。1.安装Hadoop。本文的Hadoop是部署在虚拟机上的伪分布模式。相关软件环境如下:JDK:sunjdk1.6.0_30Hadoop:hadoop-0......
  • 使用 Eclipse Dali 开发 OpenJPA 应用
    简介:JPA(JavaPersistenceAPI)是EJB3.0新引入的数据持久化编程模型。JPA充分利用了注释(Annotation)和对象/关系映射,为数据持久化提供了更简单、易用的编程方式。OpenJPA是Apache组织提供的JPA标准实现。本文是使用ApacheOpenJPA开发EJB3.0应用系列的第七部分,主要......
  • 前端基础之BOM和DOM
    window对象常用方法●window.innerHeight-浏览器窗口的内部高度●window.innerWidth-浏览器窗口的内部宽度●window.open()-打开新窗口●window.close()-关闭当前窗口navigator对象navigator.appName//Web浏览器全称navigator.appVersion//Web浏览......
  • 前端请求报错:'JSON parse error: syntax error, expect {, actual e…1, line 1, colu
    1、如果不用JSON.stringify(inputJson)包起来就会报错letinputJson={"selectUid":selectUid};varresponse=await$.ajax({type:'POST',url:'xxx',data:inputJson,//正确的是JSON.stringify(inputJson)......
  • Eclipse远程调试Tomcat
    最近,一直在研究Tomcat的工作内幕,主要的方法就是参考《HowTomcatWorks》这本书和Tomcat5.5.26的源代码。 Tomcat的代码结构还是比较清晰的,注释也比较全。但是代码毕竟是静态的,难以彻底弄清类与类之间的协作关系,以及运行时对象的交互关系。 如果能对Tomcat的启动、处理请求和停......
  • 实战演示:Apipost接口自动化测试
    Apipost提供了可视化的接口自动化测试平台,合理运用事物控制器、条件控制器、循环控制器等控制器,可以满足各种复杂测试需求。适用场景:复杂的多接口多场景回归测试比较费时费力,自动化测试平台搭建成本、维护成本太高。这里小编用电商平台购物流程来给大家介绍在Apipost中接口变量的......
  • master和node的ip发生变化
    之前部署k8s的时候用的dhcp自动获取ip,因为服务器常年不关,所以也没绑定静态ip某天公司停电,导致服务器重启后我的机器也重启原ip已经被其他机器抢占但是k8s的各种服务配置都使用的固定老的ip因此,就需要重新设置集群服务器的ip最初我是手动修改的各个配置文件中旧的IP,发现不行,因......