Text display + multi-part expansion automatic keyword tagging

effect:
Source:
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <Title> Page Title </ title>
     <style>
        *{
            margin: 0;
            padding: 0;
        }
        .with{
            width: 375px;
            height: 1920px;
            font-size: 16px;
            line-height: 32px;
            color: #666666;
        }

        a{
            margin-left: 15px;
            text-decoration: none;
        }
    </style>
</head>
<body>
How to determine whether there are the words that they want a piece of text, if there is to put those words into the red (in html)
For example, there have such a body in the text string "driving the rear-view mirror of Washington" wants to determine whether there are "driving" the word, if you have to put the word into the red
<the p-the above mentioned id = " mm " > I drove the car to play with </ p>
<div class="con" id="con">
    Demacian digital technology in digital visual field of research and development, software development, data processing, virtual simulation, digital content creation, interactive system integration integrated high-tech enterprise, corporate team by a group of senior industry experts and system design engineers; s R & D "Noxian", "AO Virginia," the two service platform for the industry to provide internet solutions for virtual simulation of cloud services; data is the future of production, commercial eMBB, VR, AR, 3D simulation will touch the horizon , the new perception and cognition, aesthetic distance, the 3D mobile, web presentation, simple, efficient, vivid, time, space, emotional bond, is to enhance corporate value, advanced language and cultural self-confidence.
    We focus on pragmatic and innovative spirit, professional quality team, full of heart altruism, make full use of science and technology intelligence and wisdom of the team, for the industry of Internet-enabled struggle! Innovation is the soul of a nation's progress! Pratt & Whitney dimensional perception AI era, let the world appreciate Demacian create!

</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 = 68 ;       // calculate the number of words that can be displayed in each row, assuming 3 lines I, can be multiplied by 3, and then subtracting this effect can be achieved from the point 
        var CON = Document. getElementById ( " CON " );
         var content = con.innerHTML;        // get the text content of the div


        var span = document.createElement ( " span " );      // Create <span> element 
        var A = document.createElement ( " A " );            // Create <a> element 
        span.innerHTML content.substring = ( 0 , len) ;      // contents span is con before len characters 

        a.innerHTML ? content.length => len " ... expand " : "" ; // if word determines whether the display is larger than the number of words to set a default display display 
        = a.href " JavaScript: void (0) " ; // make a click on the link does not jump 

        a.onclick = Function () {
             IF (a.innerHTML.indexOf ( " expanded " )> 0 ) {       // if contained in a "expand" display "hide" 
                a.innerHTML = " << & nbsp; away " ;
                span.innerHTML = content;
            }else{
                a.innerHTML = " ... expand " ;
                span.innerHTML = content.substring(0,len);
            }
        };
        // set is empty div, span elements to the div element in a 
        con.innerHTML = "" ;
        con.appendChild(span);
        con.appendChild(a);
    }
    init()
</script>
Reference blog: https: //blog.csdn.net/qq_43219422/article/details/90641557
Text display + multi-part expansion automatic keyword tagging

Guess you like
