效果：

源码：

<%@ 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 = "<<&nbsp;收起";

                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 = "<<&nbsp;收起";

                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的多文本部分展开显示+关键字自动标注的更多相关文章

  1. jQuery文本段落展开和折叠效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  2. jQuery 文本段落展开和折叠效果

    jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" c ...

  3. div模拟textarea文本域轻松实现高度自适应

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  5. DIV浮动IE文本产生3象素的bug

    描写叙述:DIV浮动IE文本产生3象素的bug    左边对象浮动.右边採用外补丁的左边距来定位,右边对象(div)会离左边有3px的间距 复现:在开发者工具里把文本模式设置了杂项后会出现3像素的bu ...

  6. 如何遍历div里面的文本内容，用each方法，

    如何遍历div里面的文本内容,然后进行匹配传来的数据,进行选中div,并进行CSS样式处理, for(i = 0; i< $(".itemMenuRowBox").child ...

  7. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  8. CSS---解决内容过多就会出文本溢出（显示在区域外面，不换行的情况）

    当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word- ...

  9. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

随机推荐

  1. 笔记||Python3之函数

    函数:          函数的概念:就是一段代码:一段操作流程. 优点:代码量少.简洁.   维护起来方便 -- 在函数的定义进行修改 函数的定义:1 - def 函数名(): 函数内容 2 - 函 ...

  2. CSS-sprite（雪碧图、精灵图）

    Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名 ...

  3. 使用docker安装虚拟机并打开ssh连接

    一.需求 最近有个需求,要连接很多个linux系统进行测试软件功能,但是我这里只有几个虚拟机,所以需要使用docker来安装几十个或者上百个虚拟机来进行测试. 二.安装docker 这里就不演示怎么安 ...

  4. IDEA+Maven 整合SSM框架实现简单的增删改查(新手入门，傻瓜操作)

    原博客地址:https://blog.csdn.net/khxu666/article/details/79851070 选用SSM框架的原因在目前的企业级Java应用中,Spring框架是必须的.S ...

  5. Runtime - 关联对象使用方法及注意点

    大家都知道在分类里,可以间接的添加属性,运用runtime关联对象. 如下图,只是声明了btnClickedCount的set, get方法而已 并没有生成_btnClickedCount 成员变量, ...

  6. uploadify没反应

    由于业务问题,需要用到uploadify这个插件,结果官方的case怎么弄都没问题,弄到自己的页面上就有问题了. 后来发现,这个插件是要用到swf的,但是页面加载的过程中并没有加载swf文件,所以将问 ...

  7. ajax数据交互

    目录 一.ORM查询优化 1-1. only与defer 1-2. select_related与prefatch_related 二.MTV与MVC模型 三.choices参数 四.AJAX 4-1 ...

  8. 《Java基础知识》Java集合（Collection）

    作为一个Developer,Java集合类是我们在工作中运用最多的.最频繁的类.相比于数组(Array)来说,集合类的长度可变,更加适合于现代开发需求: Java集合就像一个容器,可以存储任何类型的数 ...

  9. grid行高亮显示

    grid var grid = new Ext.RSEGrid({ //数据显示面板 id: 'O005_grid', title: '图纸目录', loadMask: true, autoScrol ...

  10. MySQL数据篇 （一）存储过程实现简单的数据修改及事务的使用

    1.需求,手动给会员新增京币,并且添加分配日志,返回修改是否成功 CREATE DEFINER=`jszapi`@`%` PROCEDURE `p_allot_user_coin`(IN `_memb ...