多个div的多文本部分展开显示+关键字自动标注
效果：
源码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> 页面名称 </title>
<style>
*{
margin: ;
padding: ;
}
.con{
width: 375px;
height: 1920px;
font-size: 16px;
line-height: 32px;
color: #;
} a{
margin-left: 15px;
text-decoration: none;
}
</style>
</head>
<body>
如何判断一段文字中是否有自己想要的那几个字，如果有就把那几个字变成红色（在html中）
比如有body中有这么一串文字“驾驶的后视镜的华盛顿”，想要判断里面是否有“驾驶”这两个字，如果有就把这两个字变成红色
<p id="mm">我驾驶着车玩呢</p>
<div class="con" id="con">
德玛西亚数字科技从事数字视觉领域研发、软件开发、数据处理、虚拟仿真、数字内容制作、交互系统集成的综合性高新技术企业，企业团队由一批业内资深设计专家及系统工程师组成；旗下研发“诺克萨斯”、“艾欧尼亚”两大服务平台，为产业互联网虚拟仿真云服务提供解决方案；数据是未来的生产资料，商用的eMBB，VR、AR、3D仿真将触控视界，全新的感知与认知，审美零距离，使3D移动、web呈现，简洁、高效、生动，是时间、空间、情感的纽带，是企业价值提升，文化自信的先进语言。
我们以专注务实创新的精神，专业优质的团队，满怀利他之心，充分利用科技智能与团队智慧，为产业互联网赋能而奋斗！创新是一个民族进步的灵魂！AI普惠时代的立体化感知，让世界鉴赏德玛西亚创造！ </div>
<script type="text/javascript">
document.getElementById("con").innerHTML = document.getElementById("con").innerHTML.replace(/虚拟仿真/ig,"<span style='color: red;'>$&</span>");
</script>
</body>
</html>
<script>
function init(){
//
var len = ; //计算出每一行所能显示的字数个数，假设我要显示3行，乘以3即可，然后在减去一点距离就能达到这个效果
var con = document.getElementById("con");
var content = con.innerHTML; //获取div里的文本内容 var span = document.createElement("span"); //创建<span>元素
var a = document.createElement("a"); //创建<a>元素
span.innerHTML = content.substring(,len); //span的内容就是con的前len个字符 a.innerHTML = content.length>len?"... 展开":""; //判断显示的字数是否大于默认显示的字数 来设置a的显示
a.href = "javascript:void(0)";//让a链接点击不跳转 a.onclick = function(){
if(a.innerHTML.indexOf("展开")>){ //如果a中含有"展开"则显示"收起"
a.innerHTML = "<< 收起";
span.innerHTML = content;
}else{
a.innerHTML = "... 展开";
span.innerHTML = content.substring(,len);
}
};
// 设置div内容为空，span元素 a元素加入到div中
con.innerHTML = "";
con.appendChild(span);
con.appendChild(a);
}
init()
</script>
参考博客：https://blog.csdn.net/qq_43219422/article/details/90641557
多个div：
这里使用循环调用函数：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> 页面名称 </title>
<style>
a{
margin-left: 15px;
text-decoration: none;/*a标签不显示下划线*/
}
</style>
</head>
<body>
<div id="con2">
德玛西亚数字科技从事数字视觉领域研发、软件开发、数据处理、虚拟仿真、数字内容制作、交互系统集成的综合性高新技术企业，企业团队由一批业内资深设计专家及系统工程师组成；旗下研发“诺克萨斯”、“艾欧尼亚”两大服务平台，为产业互联网虚拟仿真云服务提供解决方案；数据是未来的生产资料，商用的eMBB，VR、AR、3D仿真将触控视界，全新的感知与认知，审美零距离，使3D移动、web呈现，简洁、高效、生动，是时间、空间、情感的纽带，是企业价值提升，文化自信的先进语言。
我们以专注务实创新的精神，专业优质的团队，满怀利他之心，充分利用科技智能与团队智慧，为产业互联网赋能而奋斗！创新是一个民族进步的灵魂！AI普惠时代的立体化感知，让世界鉴赏德玛西亚创造！
</div>
<p id="con1">
德玛西亚数字科技从事数字视觉领域研发、软件开发、数据处理、虚拟仿真、数字内容制作、交互系统集成的综合性高新技术企业，企业团队由一批业内资深设计专家及系统工程师组成；旗下研发“诺克萨斯”、“艾欧尼亚”两大服务平台，为产业互联网虚拟仿真云服务提供解决方案；数据是未来的生产资料，商用的eMBB，VR、AR、3D仿真将触控视界，全新的感知与认知，审美零距离，使3D移动、web呈现，简洁、高效、生动，是时间、空间、情感的纽带，是企业价值提升，文化自信的先进语言。
我们以专注务实创新的精神，专业优质的团队，满怀利他之心，充分利用科技智能与团队智慧，为产业互联网赋能而奋斗！创新是一个民族进步的灵魂！AI普惠时代的立体化感知，让世界鉴赏德玛西亚创造！
</p> <script type="text/javascript"> </script>
</body>
</html>
<script>
function init(id){
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML.replace(/虚拟仿真/ig,"<span style='color: red;'>$&</span>");
var len = ; //计算出每一行所能显示的字数个数，假设我要显示3行，乘以3即可，然后在减去一点距离就能达到这个效果
var con = document.getElementById(id);
var content = con.innerHTML; //获取div里的文本内容
var span = document.createElement("span"); //创建<span>元素
var a = document.createElement("a"); //创建<a>元素
span.innerHTML = content.substring(,len); //span的内容就是con的前len个字符 a.innerHTML = content.length>len?"... 展开":""; //判断显示的字数是否大于默认显示的字数 来设置a的显示
a.href = "javascript:void(0)";//让a链接点击不跳转 a.onclick = function(){
if(a.innerHTML.indexOf("展开")>){ //如果a中含有"展开"则显示"收起"
a.innerHTML = "<< 收起";
span.innerHTML = content;
}else{
a.innerHTML = "... 展开";
span.innerHTML = content.substring(,len);
}
};
// 设置div内容为空，span元素 a元素加入到div中
con.innerHTML = "";
con.appendChild(span);
con.appendChild(a);
}
<%for(int i=;i<;i++){%>
init("con<%=i%>")
<%}%>
// init("con3")
</script>
多个div的多文本部分展开显示+关键字自动标注的更多相关文章
- jQuery文本段落展开和折叠效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- jQuery 文本段落展开和折叠效果
jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" c ...
- div模拟textarea文本域轻松实现高度自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- DIV浮动IE文本产生3象素的bug
描写叙述:DIV浮动IE文本产生3象素的bug 左边对象浮动.右边採用外补丁的左边距来定位,右边对象(div)会离左边有3px的间距 复现:在开发者工具里把文本模式设置了杂项后会出现3像素的bu ...
- 如何遍历div里面的文本内容，用each方法，
如何遍历div里面的文本内容,然后进行匹配传来的数据,进行选中div,并进行CSS样式处理, for(i = 0; i< $(".itemMenuRowBox").child ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- CSS---解决内容过多就会出文本溢出（显示在区域外面，不换行的情况）
当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word- ...
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
随机推荐
- Kinect-v2 Examples with MS-SDK（译文二）
K2-asset提供的脚本组件 K2-asset在KinectScripts文件夹中提供通用脚本组件,并在KinectDemos / 文件夹的相应脚本子文件夹中提供特定于演示的组件.可以在自己的Uni ...
- 使用iCamera 测试MT9F002 1400w高分辨率摄像头小结 之！！看清细节！！！
使用iCamera 测试MT9F002 1400w高分辨率摄像头小结 之!!看清细节!!! 本方案测试两种种分辨率输出(其他更多分辨率设置,可以参考手册配置) 4608*3288=1515万像素 11 ...
- PyCharm配置Gitee
PyCharm配置Gitee 第一步:下载安装Git https://git-scm.com/download/win 第二步:打开PyCharm,配置Git File->Setting-> ...
- 【JS】376- Axios 使用指南
点击上方"前端自习课"关注,学习起来~ 来源 | https://www.jianshu.com/p/df464b26ae58 一.axios 基于promise用于浏览器和 ...
- 基于Storm的WordCount
Storm WordCount 工作过程 Storm 版本: 1.Spout 从外部数据源中读取数据,随机发送一个元组对象出去: 2.SplitBolt 接收 Spout 中输出的元组对象,将元组中的 ...
- CSS让高度百分百的方案
一般用来上下所有居中,但是这时候auto的计算是全屏像素,从而得到满屏 position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; m ...
- leetcode-164、最大间距
export default (arr) => { // 如果数组长度小于2返回0 if (arr.length < 2) { return 0 } // 排序 arr.sort() // ...
- 百万级高并发mongodb集群性能数十倍提升优化实践
背景 线上某集群峰值TPS超过100万/秒左右(主要为写流量,读流量很低),峰值tps几乎已经到达集群上限,同时平均时延也超过100ms,随着读写流量的进一步增加,时延抖动严重影响业务可用性.该集群采 ...
- 数据库学习笔记day01+day02
--表示系统时间select sysdate from dual --表是关系型数据库的基本结构--表是二维的,由行和列组成--行称为记录,列称为字段 --创建第一张表create table hw( ...
- Django：永别了pycrypto库~
在开发微信登陆功能时,解密用户信息需要使用到 Crypto 包,所以安装了pycrypto库. Linux.OS X 系统均可直接 pip install pycrypto . 最近换到win10下开 ...