js练习之--数组方法，数组实现文字内容高亮、替换！

最新推荐文章于 2024-03-21 10:05:36 发布

奔跑的飞牛

最新推荐文章于 2024-03-21 10:05:36 发布

阅读量1.6k

点赞数

分类专栏： JavaScript学习笔记文章标签： js数组操作 js文字替换 js文字高亮

本文链接：https://blog.csdn.net/qq_32842925/article/details/80469087

版权

JavaScript学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

分析

我们首先会获得一个装满文字内容的字符串！
然后，我们将字符串通过特定字符进行分割并存入数组；
将特定字符串替换成携带或者其他标签包裹的字符串达到高亮；
将特定字符串替换成其他字符串达到内容替换！

我们要用到的数组操作

数组拆分

根据特定的字符串将给定的字符串拆分成数组!
数组的split()方法,可以接收两个参数，如果加入了第二个参数，那么第二个参数的数值就是你要保留的拆分出来的元素个数，这个元素和你的字符串顺序有关!


var str1 = 'hello world how are you';
console.log(str1.split(' ',2));
/*
Array(2)
  0: "hello"
  1: "world"
  length: 2
  __proto__: Array(0)
*/

数组黏合

根据特定的字符串，将数组元素黏合在给定字符串的两边，并返回一个长字符串！
数组的join()方法，

var arr = [1,2,3,4,56];

var str = arr.join('^');
console.log(str); //1^2^3^4^56

将他们组合起来！

那么怎么实现高亮和替换呢？当然是拆分后把原来的字符串套上标签给上样式粘回去就可以实现高亮啦；而替换就是把原来的字符串换成另外的字符串就可以啦！
说来苍白，直接看例子(为了方便我直接附上所有哦代码，全文和引用的css没有关系，我们用的是js！)：


<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <meta http-equiv='X-UA-Compatible' content='IE = edge'>
    <title>文字高亮和替换</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
</head>

<body>
    <div class="contentbox">
        <div class="con-head">
            <span>输入你要查找的内容:</span>
            <input type="text" id="textSearch" value="飞机杯">
            <input type="button" value="查找" id="btSearch"> &nbsp;&nbsp;&nbsp;&nbsp;
            <span>输入你要替换的文字内容:</span>
            <input type="text" id="textReplace" value="可乐杯">
            <input type="button" value="替换" id="btReplace">
        </div>
        <div id="textContent">
            <p>飞机杯属于男用便携类性具 。在现代社会压力大的情况下，缓解发泄男性欲望。不歧视使用飞机杯的情况， 但是也不盲目夸大飞机杯的作用。不存在保健增粗的功效，仅跟手淫一样用于缓解个人欲望，所以在使用上还请尽量节制。 外观小巧，像个可乐杯，模仿阴、口、肛三种交欢通道，由于内置结构的高仿真，所以用起来逼真度很高。
                飞机杯属于男用便携类性具 。在现代社会压力大的情况下，缓解发泄男性欲望。不歧视使用飞机杯的情况， 但是也不盲目夸大飞机杯的作用。不存在保健增粗的功效，仅跟手淫一样用于缓解个人欲望，所以在使用上还请尽量节制。 外观小巧，像个可乐杯，模仿阴、口、肛三种交欢通道，由于内置结构的高仿真，所以用起来逼真度很高。飞机杯属于男用便携类性具
                。在现代社会压力大的情况下，缓解发泄男性欲望。不歧视使用飞机杯的情况， 但是也不盲目夸大飞机杯的作用。不存在保健增粗的功效，仅跟手淫一样用于缓解个人欲望，所以在使用上还请尽量节制。 外观小巧，像个可乐杯，模仿阴、口、肛三种交欢通道，由于内置结构的高仿真，所以用起来逼真度很高。
            </p>
        </div>
    </div>
</body>
<script>
    document.getElementById("btSearch").onclick = function () {
        var tagP = document.getElementById("textContent").getElementsByTagName("p");
        var iptText = document.getElementById("textSearch").value;
        console.log(iptText);
        var pStrArray = tagP[0].innerText.split(iptText);
        var pHeilightStr = pStrArray.join("<span style=\"color:white;background-color:red; \">" + iptText + "</span>");
        tagP[0].innerHTML = pHeilightStr;
    }
    document.getElementById("btReplace").onclick = function () {
        var tagP = document.getElementById("textContent").getElementsByTagName("p");
        var iptText = document.getElementById("textSearch").value;
        var iptReplaceText = document.getElementById("textReplace").value;
        console.log(iptReplaceText);
        var pStrArray = tagP[0].innerText.split(iptText);
        var pHeilightStr = pStrArray.join("<span style =\"color:white;background-color:red;\">" + iptReplaceText + "</span>");
        tagP[0].innerHTML = pHeilightStr;
    }
</script>

</html>