JS获取IP地址对应地区、输入监听、字符串的替换

最新推荐文章于 2022-03-14 15:25:38 发布

原创最新推荐文章于 2022-03-14 15:25:38 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS输入监听 #JS字符串替换 #JS获取ip位置

JS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用JavaScript结合百度API获取IP地址所在地理位置，并实现文本框输入内容实时验证与替换操作，包括IP定位API调用、文本框输入监听与字符串替换策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、JS根据获取一个IP段中所有IP对应的地址，使用百度API接口
JS代码如下：

<script type="text/javascript">                    
	function showLocation(data) {
		if (data) {
			console.log(data);
			var province=data.content.address_detail.province;//省份
			var city=data.content.address_detail.city;//城市
		} 
	}
</script>
<script type="text/javascript" src="http://api.map.baidu.com/location/ip?ak=你的百度账户的ak&callback=showLocation"></script>

2、文本框的输入监听

function immediately() {
   var element = document.getElementById("code");//获取被监听的文本框
   if ("\v" == "v") {
        element.onpropertychange = webChange;
    } else {
        element.addEventListener("input", webChange, false);
    }
    function webChange() {
        if (element.value) {
            var code = element.value;
            if (code == "123") {
            //输入内容是123时执行的操作
            } else {
            //输入不正确时执行的操作
            }
        };
    }
}
immediately();

3、字符串的替换，一组数据的选择和取消，思路是点击一次是添加，再点击一次就是删除，用一个隐藏的input来保存当前的选择结果。
toggle支持两个以及两个以上的函数的循环执行。
$("#sales li")这种方式可以获取id为sales标签下的所有li元素，可以用$(this).index()来获取当前元素是元素组li的第几个。
JS字符串的替换比较麻烦：
re1 = new RegExp(“abc”, “g”);//abc是要被替换掉的内容，g表示全局替换。
sealid = sealid.replace(re1, ‘123’);//123表示新的内容
上面这段的意思就是把sealid字符串里的字符串abc用123来代替。
下面是项目中实例代码：

$("#sales li").toggle(function () {
	//添加选项、选择
	$(this).css("background-color", "#cbcbcb");
	var sealid = $("#hidsealid").val();
	sealid = sealid + (10 - $(this).index()) + ",";
	$("#hidsealid").val(sealid);
	
	var seals = $("#hidseals").val();
	seals = seals + $(this).children("a").html() + ",";
	$("#hidseals").val(seals);
	$("#txtsales").val($("#hidseals").val().substring(0, $("#hidseals").val().lastIndexOf(',')));
	//alert($("#hidsealid").val() + "---" + $("#txtsales").val());
	
	}, function () {
	//删除选项、取消
	$(this).css("background-color", "");
	var sealid = $("#hidsealid").val();
	re1 = new RegExp((10 - $(this).index()) + ",", "g");
	sealid = sealid.replace(re1, '');
	$("#hidsealid").val(sealid);
	
	var seals = $("#hidseals").val();
	re2 = new RegExp($(this).children("a").html() + ",", "g");
	seals = seals.replace(re2, '');
	$("#hidseals").val(seals);
	$("#txtsales").val($("#hidseals").val().substring(0, $("#hidseals").val().lastIndexOf(',')));
	//alert($("#hidsealid").val() + "---" + $("#txtsales").val());
	});

html页面内容如下：

<ul id="sales" class="pop_box_wrap">
    <li><a href="javascript:void(0);">商超</a></li>
    <li><a href="javascript:void(0);">流通</a></li>
    <li><a href="javascript:void(0);">餐饮</a></li>
    <li><a href="javascript:void(0);">酒店</a></li>
    <li><a href="javascript:void(0);">夜场</a></li>
    <li><a href="javascript:void(0);">专卖店</a></li>
    <li><a href="javascript:void(0);">专供</a></li>
    <li><a href="javascript:void(0);">网购</a></li>
    <li><a href="javascript:void(0);">团购</a></li>
    <li><a href="javascript:void(0);">其他</a></li>
</ul>
<input type="text" id="txtsales" class="l-text" name="txtsales" readonly="true" />
<input type="hidden" id="hidsealid" value="" />
<input type="hidden" id="hidseals" value="" />