javascript中spilt和join之间的区别以及html内容替换

最新推荐文章于 2024-04-10 15:33:31 发布

独夜

最新推荐文章于 2024-04-10 15:33:31 发布

阅读量406

点赞数

文章标签：字符串 js javascript

本文链接：https://blog.csdn.net/qq_42444795/article/details/105583614

版权

1.spilt()方法：

split() 方法用于把一个字符串分割成字符串数组。

第一种情况是：如果只有一个参数，则以这个参数为中心分割字符串。
比如：

<script>
        var str="这是;一个;字符";
        document.write(str.split(";"));        //这是,一个,字符
</script>

这时候有人就会有疑惑了：”为什么 ; 变成了 , 而不是空格符“
这是因为spilt返回的是一个数组，实际上返回的是[“这是”,“一个”,“字符”]，上面我们说了，split方法是把字符串分割成数组。

  <script>
        var str="这是;一个;字符";

        document.write("这是不用数组存储前的split方法"+"<br>");
        document.write(str.split(";")+'<br>');
        document.write("这是使用数组存储后的split方法"+"<br>");
        var array=new Array();
        array=str.split(";");
        for(var i=0;i<array.length;i++)
        {
            document.write(array[i]);
        }
    </script>

结果：
这是不用数组存储前的split方法
这是,一个,字符
这是使用数组存储后的split方法
这是一个字符

以上的代码便是简单的用数组存储split()的返回值。
这时候运行就会发现输出的字符串是完整的中文字符串。

第二种情况就是：split()有两个参数。
对上面的代码中的split()进行修改。

 <script>
        var str="这是;一个;字符";

        document.write("这是不用数组存储前的split方法"+"<br>");
        document.write(str.split(";","2")+'<br>');   //修改前document.write(str.split(";")+'<br>');
        document.write("这是使用数组存储后的split方法"+"<br>");
        var array=new Array();
        array=str.split(";","1");      //修改前array=str.split(";"); 
        for(var i=0;i<array.length;i++)
        {
            document.write(array[i]);
        }
    </script>

结果：
这是不用数组存储前的split方法
这是,一个
这是使用数组存储后的split方法
这是

这时候我们可以发现：字符串只显示split()第二个参数的个数。split(";",“1”)只显示第一个分割字符。

2.join方法

join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。

join方法正好和spilt方法相反，是进行元素的"粘合"。
比如：

结果：
这是,一个,字符
这是一个字符

这时候我们会发现，join()返回的字符串中间没有 “，”，这是因为join()返回的是一个字符串而不是数组，用" "进行隔开相当于无缝粘合。

3.用于文件替换

这时候我们发现，一个方法可以分割字符串，一个方法可以粘合字符串，所以我们可以用来进行文件的替换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         p{
             width: 650px;
             height: 100px;
             background-color: #ffff80;
             border: 2px solid;
             font-size: 18px;
             font-family: "微软雅黑";
         }
         span{
             color: red;
         }
    </style>
</head>
<body>
<input type="text" />
<input type="text" />
<input type="button" value="替换" />
<p id="box">
    生命本是一场漂泊的漫旅，遇见了谁都是一一个美丽的意外。<br>
    我珍惜着每一个可以让我称做朋友的人,因为那是可以让漂泊的心驻足的地方。<br>
    有时候会被一句话感动，因为真诚;有时候会为一首歌流泪，因为自然。<br>
    要快乐，不止此时，而是一生!
    </p>
    <script>
        window.onload=function(){
            var inp=document.getElementsByTagName("input");
            var oP=document.getElementById("box");
    
            inp[2].onclick=function(){
                var str = inp[0].value;
                var str1= inp[1].value;//这里是需要替换的关键字
                if (!str)return; //若内容不存在即返回
                oP.innerHTML=oP.innerHTML.split(str).join('<span>'+str1+'</span>')
            }
        };
    </script>
</body>
</html>

以上就是split()和join的介绍。

独夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript中spilt和join之间的区别以及html内容替换

1.spilt()方法：split() 方法用于把一个字符串分割成字符串数组。第一种情况是：如果只有一个参数，则以这个参数为中心分割字符串。比如：<script> var str="这是;一个;字符"; document.write(str.split(";")); //这是,一个,字符</script>这时候...
复制链接

扫一扫