多个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 ...
随机推荐
- KEIL MDK 算式优先级 备忘
GPRS_SEND_Buff[index++]=stDev.SN>>24+(GPRS_SEND_Buff[4]%4); GPRS_SEND_Buff[index++]=stDev.SN&g ...
- [vue]初探生命周期
Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期. 一.创建/销毁,缓存 1.cre ...
- 【ES】338- ECMAScirpt 2019 新特性汇总
点击上方"前端自习课"关注,学习起来~ 最近在做的一个活动,大家都可以参与: 送 1600 元超大现金红包啦,走过路过不要错过哦 ~ 最近 ECMAScript2019,最新提案完 ...
- Orleans[NET Core 3.1] 学习笔记（二）Hello World
项目结构 开始Orleans之前,我们都知道Orleans主要可以分为俩部分,Host和Client. 所以我们可以创建如下的项目结构: IGrain 一个包含Grain接口的库(.NET Stand ...
- JS 判断移动端 ，跳转
function SetPlatForm() { var JumpUrl = ""; var sUserAgent = navigator.userAgent.toLowerCas ...
- 人生苦短，我用Python（3）
1.对列表进行排序: (1)使用列表对象的sort()方法: 列表对象提供了sort()方法用于对原列表中的元素进行排序.排序后原列表中的元素顺序将发生改变.改变对象的sort()方法的语法格式如下: ...
- 从KafkaConsumer看看Kafka（一）
Kafka的消息模型为发布订阅模型,消息生产者将消息发布到主题(topic)中,一个或多个消费者订阅(消费)该主题消息并消费,此模型中发布到topic中的消息会被所有消费者所订阅到,先介绍Kafk ...
- 一起学Vue之入门篇
概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- Android 程序分析环境搭建-开发环境搭建
1.1 JDK 安装 JDK 的配置,初学java 开发,那是必须会的. 下载,遇到的问题就是要注册oracle 的账号,还有你要下载特定版本,比如jdk 1.7,jdk 1.6,很难找到在哪里.解 ...
- Sqlite—数据库备份与恢复
数据库备份 例如:备份 /www/wwwroot 下面的 task.db 数据库 1.进入数据库 [root@localhost ~]# sqlite3 /www/wwwroot/task.db 2. ...