js正則表達式全文關鍵字搜索並高亮

時間 2019-12-06

原文原文鏈接

咱們知道正則表達式最厲害之處就是字符匹配功能，因此如下一個demo介紹瞭如何用正則表達式進行字符匹配。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正則表達式</title>
    <style>
        body{
            text-align: center;
        }
        div{
            margin: auto;
        }
        #pDiv{
            margin-top: 5%;
            width: 50%;
        }
        #pDiv span{
            background-color:rgba(131,255,28,0.63);
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="InP" placeholder="請輸入關鍵字..."/>
    <button id="btnSearch">搜索</button>
    <button id="btnReset">還原</button>
</div>

<div id="pDiv">
    <p>2018數博會己開始籌備，2018數博會傳播組將迎來一位智能明星——小編機器人。小編機器人是一款人工智能機器人產品，這個產品運用智能語義分析技術、機器學習和深度學習技術、神經網絡和知識圖譜技術，以及創新發明的獨特算法，可以在毫秒級時間內對涉時政類文本進行自主自動勘誤。
        據乘方大數據公司CTO趙振宇介紹，小編機器人對涉時政類的重要名詞、詞組、姓名、職務、排序能自動實現百分之百精準勘誤，還能對涉時政類概念、搭配、句子、表述自動進行準確勘誤，也能對涉時政類的文本內容進行智能勘誤。這對於報社、出版社、通信社、雜誌社、網站、政府機關、企事業單位、社會團體直至我的撰寫重要文章文件都是一個好消息。
        小編機器人項目負責人說，在智能語義技術方面，英語走的遠一些，而漢語因爲其語義的複雜性要比英語困可貴多。好比SIRI，英語SIRI的智商就比漢語SIRI的智商高。而小編機器人必定程度上打敗了這個難關，如今，小編機器人即便和千百萬「專業編輯」進行「速度」和「準確性」的角逐，仍然穩操「漢語文本第一編輯」之勝券，據我對小編機器人獨特算法和深度學習狀況的瞭解，小編機器人確是人工智能的一顆璀璨新星。
        人工智能專家評價，小編機器人實現的文本自主自動勘誤，不只可以極大地節約勞動成本，極大地提升工做效率，確保重要表述的準確性，對新聞出版行業以及政府機關相關部門的業務流程、業務模式、業務標準產生深入影響。</p>
</div>
<script src="../js/jquery-3.2.1.js"></script>
<script>
$('#btnSearch').click(function () {

    var txt = $('#pDiv p').text();
    var strS = $('#InP').val();
    //這裏選擇用 構造函數的方式初始化正則表達式對象  由於可使用變量 字面量沒法作如
    // 字面量正則表達式：var subStr = /關鍵字/g;
    var subStr = new RegExp(strS,'g');
    
    
    var result=txt.replace(subStr,"<span>"+strS+"</span>");
     $('#pDiv').html('<p>'+result+'</p>');
});
$('#btnReset').click(function () {

    var txt = $('#pDiv p').text();
    var subStr = new RegExp('<span>','g');
    var subStr2 = new RegExp('</span>','g');

    var result1=txt.replace(subStr,"");
    var result=result1.replace(subStr2,"");
    $('#pDiv').html('<p>'+result+'</p>');
});
</script>
</body>
</html>