JS获取页面中指定元素的值，并去除其中的时间格式

最新推荐文章于 2024-01-17 23:56:10 发布

Annn_kk

最新推荐文章于 2024-01-17 23:56:10 发布

阅读量1.3k

点赞数 1

分类专栏： JS 文章标签： JS 正则表达式

本文链接：https://blog.csdn.net/annn_kk/article/details/89488908

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先需要遍历获取表单页面中的页面元素

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>