多个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 ...
随机推荐
- Linux-部署-Django
Linux-部署-Django-项目过程与问题总结 优才网 2017-04-12 18:00 本篇主要用于记录部署 Django 项目所有踩过的坑. 最近学习 Django 框架开发,将项目部署到 ...
- 面试百度、阿里、腾讯，这134道Java面试题你会多少？
这里一共是134道Java面试题,看看你能对几道吧! 1. Java 语言有哪些特点 2. 面向对象和面向过程的区别 3. 关于 JVM JDK 和 JRE 最详细通俗的解答 4. Oracle JD ...
- autocad 二次开发 最小包围圆算法
autocad 二次开发 最小包围圆算法 主要实现了在模型空间下的得到一个包围所有图元的最小圆,该算法的思路是这样:1.从点集中随机选出两个点作为直径对圆进行初始化.2.判断下一个点p是否在圆中,如果 ...
- php5.4.16执行shell脚本
因为要用到Python脚本,所以打算直接在PHP中直接调用系统命令system(). 要注意两点: 一.PHP5.3以上不存在安全模式,即要直接执行脚本不需要作任何其他配置. 二.system函数格式 ...
- 如何在Sublime中打开左侧文件夹导航
Sublime中我们可以通过菜单栏的View->Side Bar->Hide Side Bar(Show Side Bar)来显示和隐藏左侧的导航栏,如下图所示. 但是,这里只会显示当前打 ...
- webpack学习2.1 模块化开发(JS模块化&CSS模块化)
一.JS模块化 命名空间,COMMONJS,AMD/CMD/UMD,ES6 module 1.什么是命名空间 库名.类别名.方法名 弊端:在命名空间重复生命,要记住完整的路径名(而且很长) var N ...
- dev gridcontrol绘制页脚
gridView.OptionsView.ShowFooter = true;//启用显示页脚 //索引为1的列 gridView.Columns[1].SummaryItem.DisplayForm ...
- Java String indexOf()方法
public class Test { public static void main(String[] args) { String s = "xXccxxxXX"; // 从头 ...
- 聊一聊JS输出为[object,object]是怎么回事
JS输出为[object object] 今天在学习ES6中的 Symbol 数据类型时,在写demo时控制台输出为 Symbol[object object] ,当时有点疑惑,查阅了相关资料后搞清楚 ...
- 记MAC地址、磁盘序列号的获取
import java.io.*; import java.net.Inet4Address; import java.net.InetAddress; import java.net.Network ...