首先需要遍历获取表单页面中的页面元素
1.可以通过 getElementsByTagName 方法来获取
getElementsByTagName("标签名称") //代表查询返回所有该标签的元素,因此他是个集合
document.getElementsByTagName("标签") //即查询文档中所有的该标签元素
alert(document.getElementsByTagName("div").length) //返回查询结果的数量,这里结果为 1
获取到元素集合以后,可以通过循环对元素进行遍历,条件为标签 .length
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<script type="text/javascript">
//搜索文档下第一个div下的input子节点
window.onload = function () { //文档加载完毕事件
var div1 = document.getElementsByTagName("div")[0]; //文档第一个DIV,如果去掉[0]就可以获取到表单中所有的DIV集合
var inputs = div1.getElementsByTagName("input"); //获取该DIV下的所有input标签元素
for (var i = 0; i < inputs.length; i++) { //循环获取每个input表单元素值
var value = inputs[i].value;//通过value获取元素的value值
var text = inputs[i].innerText;//通过innerText或者innerHTML获取元素的文本值
alert(value);
}
}
</script>
<body>
<form name="form1" method="GET">
<div>
input1:<input name="input1" type="text" value="时间1 2018-10-15 12:11:53" />
input2:<input name="input2" type="text" value="时间2 2019-11-21 16:11:53" />
</div>
</form>
</body>
</html>
那如果需要获取第一个 input 标签的文本的话,可以这样写
document.getElementsByTagName("input")[0].innerHTML
innerHTML
可以作为获取文本的方法也可以作为修改文本内容的方法
element.innerHTML 会直接返回element节点下所有的HTML化的文本内容
也就是返回元素下所有内容的文本值(包括HTML标签)
不会更改页面的样式,因为会将HTML标签一起再赋值回去
比如:获取body下的文本
<body>
<div>文本</div>
<div>文本</div>
</body>
document.body.innerHTML
//返回"<div>文本</div><div>文本</div>";
而逆向的可以进行赋值
document.body.innerHTML="<div>文本</div><div>文本</div>"
会生成
<body>
<div>文本</div>
<div>文本</div>
</body>
textContent
与innerHTML方法类似,会返回对象节点下所有的文本内容(不包括HTML标签),直接输出不换行的文本
而且还会获取到 标签属性,style= “display:none” 中的文本
再赋值可能会清除页面原有格式,比如换行等
textContent只支持IE8+以上的浏览器
但是区别为 textContent返回的内容只有去HTML化的文本节点的内容 如上例:
document.body.textContent
// 返回"文本文本"
innerText
与textContent功能类似,一样是返回标签元素下的文本内容,会根据标签里面的元素独立一行
但是不会获取到style= “display:none” 中的文本
再赋值不会破坏页面原有的格式,比如换行等
innerText的对于IE的兼容性比textContent好
如上例:
document.body.innerText
// 返回"文本文本"
2.当获取到相应文本之后,就可以通过replace函数替换
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
语法:
stringObject.replace(regexp/substr,replacement)
参数 | 描述 |
regexp/substr | 必需。规定子字符串或要替换的模式的 RegExp 对象。请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。 |
replacement | 必需。一个字符串值。规定了替换文本或生成替换文本的函数。 |
返回值
一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
如果匹配的是正则表达式的话,可以通过在正则表达式最后加上g,作为全局标识,这样,就会替换字符串中所有符合正则表达式匹配的值,不然的话只会替换第一个匹配到的值。
var str="hello world!";
str=str.replace("hello","");
// str=" world!"
//即使用空串替换某一个字符串,则是可以实现去除指定字符串功能
var str="2018-12-15 12:15:23";
str = str.replace("/\d{1,2}:\d{1,2}:\d{1,2}/g","");
// str="2018-12-15"
//用正则表达式去除了时间格式中的时分秒,HH:mm:ss 格式
var str="时间格式 2018-12-15 12:15:23";
str = str.replace(/\d{1,4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}:\d{1,2}/g,"");
//str="时间格式 "
//用正则表达式匹配去除了字符串中的时间格式,YYYY-MM-DD HH:mm:ss
那么最后,获取页面中的所有指定元素的值,并且将元素的值中的时间格式去除的方法为:
例子1:
获取页面中的所有DIV元素,并且将DIV元素中Input元素中的时间格式的Value值去除
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<script type="text/javascript">
//搜索文档下第一个div下的input子节点
window.onload = function () { //文档加载完毕事件
var div1 = document.getElementsByTagName("div")[0]; //文档第一个DIV,如果去掉[0]就可以获取到表单中所有的DIV集合
var inputs = div1.getElementsByTagName("input"); //获取该DIV下的所有input标签元素
for (var i = 0; i < inputs.length; i++) { //循环获取每个input表单元素值
var value = inputs[i].value;//通过value获取元素的value值
alert("修改前的时间值为:" + inputs[i].value);
inputs[i].value = value.replace(/\d{1,4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}:\d{1,2}$/g,"");
alert("修改后的时间值为:" + inputs[i].value);
}
}
</script>
<body>
<form name="form1" method="GET">
<div>
input1:<input name="input1" type="text" value="时间1 2018-10-15 12:11:53" />
input2:<input name="input2" type="text" value="时间2 2019-11-21 16:11:53" />
</div>
</form>
</body>
</html>
例子2:
获取相关类型判断,再判断DIV元素的文本值中是否含有相应时间格式,再去除相应时间格式
如果使用innerText,textContent再赋值可能会导致页面的标签元素丢失,使用innerHTML则会保存所有的标签元素。
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<script type="text/javascript"
src="C:\Users\Administrator\Desktop\jquery-ui-1.11.4和jQuery-3.4.0.custom\jquery-3.4.0.min.js"></script>
<script type="text/javascript">
window.onload = function CancelTime() { //文档加载完毕事件,JS原生onload方式
var div1 = document.getElementsByTagName("div"); //获取到表单中所有的DIV集合
var reg = RegExp(/\d{1,4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}:\d{1,2}/g); //设置正则表达式,匹配 YYYY-MM-DD HH-mm-ss 的时间格式
var reg2 = RegExp(/\d{1,4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}/g); //设置正则表达式,匹配 YYYY-MM-DD HH-mm 的时间格式,g(执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。)
for (var i = 0; i < div1.length; i++) { //循环获取每个DIV的文本值
var text = div1[i].innerHTML; //innerText获取DIV的文本值(不包含HTML标签)
if (text.match(reg)) { //如果字符串中包含指定时间格式 YYYY-MM-DD HH-mm-ss
div1[i].innerHTML = text.replace(reg, ""); //以空字符串替换匹配的时间格式,再赋值回文本
} else if (text.match(reg2)) { //如果字符串中包含指定时间格式 YYYY-MM-DD HH-mm
div1[i].innerHTML = text.replace(reg2, "");
}
}
}
$().ready(function () {//文档加载完毕时间,jQuery,ready方式
var div1 = document.getElementsByTagName("div"); //获取到表单中所有的DIV集合
var reg = RegExp(
/\d{1,4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}:\d{1,2}/,"g"); //设置正则表达式,匹配 YYYY-MM-DD HH-mm-ss 的时间格式
var reg2 = RegExp(/\d{1,4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}/,"g"); //设置正则表达式,匹配 YYYY-MM-DD HH-mm 的时间格式,g(执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。)
for (var i = 0; i < div1.length; i++) { //循环获取每个DIV的文本值
var text = div1[i].innerHTML; //innerText获取DIV的文本值(不包含HTML标签)
if (text.match(reg)) { //如果字符串中包含指定时间格式 YYYY-MM-DD HH-mm-ss
div1[i].innerHTML = text.replace(reg, ""); //以空字符串替换匹配的时间格式,再赋值回文本
} else if (text.match(reg2)) { //如果字符串中包含指定时间格式 YYYY-MM-DD HH-mm
div1[i].innerHTML = text.replace(reg2, "");
}
}
});
</script>
<body>
<form name="form1" method="GET">
<div>
div1的时间1 2018-10-15 12:11:53<input name="input1" type="text" value="div1的时间1 2018-10-15 12:11:53" />
div1的时间2 2019-11-21 16:11:53<input name="input2" type="text" value="div1的时间2 2019-11-21 16:11:53" />
</div>
<div>
div2的时间1 2017-9-15 12:11:53<input name="input1" type="text" value="div2的时间1 2017-9-15 12:11:53" />
div2的时间2 2008-2-21 16:11:53<input name="input2" type="text" value="div2的时间2 2008-2-21 16:11:53" />
</div>
<div>
div3的时间1 2029-10-15 12:11:53<input name="input1" type="text" value="div3的时间1 2029-10-15 12:11:53" />
div3的时间2 2093-11-21 16:11:53<input name="input2" type="text" value="div3的时间2 2093-11-21 16:11:53" />
</div>
</form>
</body>
</html>