分析

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

我们要用到的数组操作

数组拆分

根据特定的字符串将给定的字符串拆分成数组!
数组的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>

代码解读

首先，我用事件绑定给两个按钮分别绑定了两个点击事件(onclik);
然后，我使用了DOM对象获取了p标签的所有文本并赋值于一个字符串；同时用DOM对象获取了文本框input/text里要操作的字符串；
在点击事件触发的时候，我用数组split()方法把p标签里的文字内容根据获取的input/text内容拆分成数组；
然后用数组黏合方法join()把我希望设定的标签和字符串拼接后与数组元素黏合！
最后将数组返回p标签的innerHTML！

这里的关键点在于你想替换的内容结合标签是创新发展的地方，你可以是span，可以使img，也可以是另外的模块，js是智能的，思想是开放的！

我的在线demo地址：
https://wytheo.github.io/StudyContainer/JavaScriptIFE/ArrayReplace/index.html

我的在线代码地址：
https://github.com/WytheO/StudyContainer/blob/master/JavaScriptIFE/ArrayReplace/index.html

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

数组方法 + ES6中数组方法 + 数组的空位
目录 1.静态方法 1.Array.isArray() Array.isArray方法返回一个布尔值,表示参数是否为数组.它可以弥补typeof运算符的不足. 2.Array.from() 用于将两类 ...
给数组倒序_22个超详细的 JS 数组方法
作者:Yushiahttps://juejin.cn/post/6907109642917117965 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工 ...
22个超详细的 JS 数组方法
22个超详细的 JS 数组方法数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响. 一.创建数组 1.使用数组 ...
android给数组添加新元素_重磅！超详细的 JS 数组方法整理出来了
作者:Yushiahttps://juejin.cn/post/6907109642917117965 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工 ...
前后端交互必备之js数组方法大全
CSDN写作新手,写的不妥之处,请大佬纠正且多多包涵. 文章目录数组简介一.js数组方法二.js数组方法的使用 1.基础方法 2.进阶方法数组简介数组,就是将多个元素(通常是同一类型)按一定 ...
js不完全入门之数组
数组是值得有序集合.每个值叫做元素,每个元素在数组中都有数字位置编号,也就是索引. JS中的数组是弱类型的,数组中可以含有不同类型的元素. 数组元素甚至可以是对象或其它数组. var arr = [1 ...
ES5-15 数组基础、数组方法、数组排序
创建数组字面量 var arr = [] 构造函数 var arr = new Array() 不使用new var arr = Array() 所有数组都继承于Array.prototype,能使 ...
es4----es6数组方法
1.数组方法数组元素的排序:sort() 语法格式:数组名.sort(); sort()方法可以没有参数使用:将数组中所有的元素都看作字符型数据来进行排序. var num=[10,5,4,0,29 ...
html怎么遍历数组,JavaScript如何遍历数组？遍历数组方法介绍
在往期文章中为大家介绍了 JavaScript 如何定义数组.那么这篇文章中 w3cschool 小编来为大家介绍下 JavaScript 如何遍历数组. 方法一:for 循环遍历数组 var arr ...
Javascript常用的数组方法
Javascript常用的数组方法数组定义:计算机内存中一段连续的空间: 数组的几种常用方法 1.splice:可对数组进行增.删.改的操作: 2.push:给数组的末尾添加一个或多个元素: 3. ...

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

分析