多个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 ...
随机推荐
- 用FPGA设计LCD 转 VGA
这个东西其实是在上一个冬天就做完了,而且似乎已经产业化了,当时是为一位朋友做的,这个朋友再卖给产业化的人,就像流于俗套的故事一样,这个朋友拿到了钱,不过不像项目开始时说的那样与我有关.想想多年前一起吃 ...
- Python3 常用的几个内置方法
目录 max()/min() filter() 过滤 map() 映射 sorted筛选 reduce()减少 max()/min() 传入一个参数 (可迭代对象), 返回这个可迭代对象中最大的元素 ...
- 搭建react native所遇到的坑
一.所遇问题 在搭建react native环境中,遇到执行react native run-android命令出现如下问题 Could not resolve all dependencies f ...
- SOCKET CAN的理解
转载请注明出处:http://blog.csdn.net/Righthek 谢谢! CAN总线原理 由于Socket CAN涉及到CAN总线协议.套接字.Linux网络设备驱动等.因此,为了能够全面地 ...
- 更新Preloader和uboot
在SoCEDS环境下编译和更新preloader和uboot程序的方法 前面有介绍preloader在HPS boot过程中的的作用,接下来讲述下用户在SoCEDS环境下改如何编译preloade ...
- 新手如何快速入门node.js
附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全: 书单导航页(点击右侧 极客侠栈 即可打开个人博客):极客侠栈 ①[Java]学习之路吐血整理技术书 ...
- Python面向对象-访问权限public和private
上一节我们介绍了,Class内部可以有属性和方法,外部代码通过直接调用实例的方法来操作数据,这样就可以隐藏内部的逻辑实现:同时,外部代码还是可以自由的修改实例的属性和增加方法. 但是有时候,我们不想这 ...
- C# get md5,renamed file and can not change file's md5
using System; using System.Text; using System.IO; using System.Security.Cryptography; namespace Cons ...
- System.InvalidOperationException: The binary operator NotEqual is not defined for the types 'Microsoft.EntityFrameworkCore.Storage.ValueBuffer' and 'Microsoft.EntityFrameworkCore.Storage.ValueBuffer'.
.netcore 2.1使用左表连接时报错,原因是对数据库中实体 DateTimeOffset date做查询判断时,将数据库中date转为string进行了判断,这样判断是错误的,并且效率低,应该是 ...
- 前端开发必备：nvm与npm与nrm
nvm Node.js version manager ,推荐使用它来安装 node.js . Mac 版项目地址 Windows 版项目地址 windows 版安装 进入 下载页 找到安装包: 跟着 ...