Question

我正在用html5开发一个项目。我在div中搜索一个单词。我需要从内容中突出显示该单词，并且需要在搜索到的单词之前和之后对内容进行切片。这是我的代码。

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
        />


        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>


        <script>


            $(document).ready(function(){           
                $('#search').click(function() {                 
                    var keyword = $('.qid').val().replace(/\s+/g, " ").replace(/\s+$|^\s+/g, "");  
                    var containsString = keyword;               
                    if(keyword == ""){  

                    }else{
                        $('#search_content').css('overflow-y','scroll');
                    }                               
                    $("p").removeClass('show');
                    containsString = "p:contains("+containsString+")".replace("p:contains()","");                   

                    $(containsString).addClass('show');

                    $('#search_content').show();                                    


                });
                $('.srch').click(function(){
                    $('#displaybox2').show();
                });

            });

        </script>
        <style>
    .srch {
        background: none repeat scroll 0 0 #FFFFFF;
        color: #FFFFFF;
        cursor: pointer;
        float: right;
        height: 30px;
        margin-right: 27%;
        margin-top: 5px;
        padding: 2px 0 2px 3px;
        width: 30px;
    }
    #displaybox2 {
        border: 1px solid #FFFFFF;
        float: left;
        height: 552px;
        left: 1px;
        position: relative;
        width: 370px;
        z-index: 100000;
    }
    #search_content {
        float: left;
        width: 100%;
        position: relative;
        height: 510px;
        display: none;
    }
    p,h2{
      display:none;
    }
    .qid{
        margin-top:10px;
    }
    .show{
        display: block;
        background-color:#FFFFFF;
        cursor:pointer;
    }
    .highlight{
        background-color:#636F7C;
    }
    .srch_icon {
        width: 100%;
    }
        </style>
      </head>

      <body>

        <div id="displaybox2">
            <input class="qid" type="text"/><button id = "search">Search</button>       
            <div id = "search_content">     
                <p>Next evening was a lovely evening, and I walked out early to enjoy it. The sun was not yet quite down when I traversed the field-path near the top of the deep cutting. I would extend my walk for an hour, I said to myself, half an hour on and half an hour back, and it would then be time to go to my signal-man’s box.</p>
                <p>Before pursuing my stroll, I stepped to the brink, and mechanically looked down, from the point from which I had first seen him. I cannot describe the thrill that seized upon me, when, close at the mouth of the tunnel, I saw the appearance of a man, with his left sleeve across his eyes, passionately waving his right arm.</p>

            </div>
        </div>
      </body>

    </html>

如果我搜索单词'extend'，则返回答案为

第二天晚上是一个美好的夜晚，我早早走出去享受它。当我穿过深切割顶部附近的田间路径时，太阳还没有完全下降。我会延长一小时的步行时间，我对自己说，半小时后半小时回来，然后就可以到我的信号箱了。

但我需要下面的答案

....靠近深切割的顶部。我会延长我的步行一小时，我对自己说，半小时......

编辑：

我需要关键字之前和之前的10个字。如果关键字是不止一次存在，它也会在之前和之后显示10个单词关键字。你明白了吗帮助我

http://jsfiddle.net/3fTD3/

提前致谢...

Answer 1

可能是这样的：

$('#search').click(function() {                 
    var keyword = $('.qid').val().replace(/\s+/g, " ").replace(/\s+$|^\s+/g, ""),
        containsString = keyword;         

    if (keyword == "") {  

    }
    else {
        $('#search_content').css('overflow-y','scroll');
    }   

    if ($("p:contains('" + keyword + "')").length) {
        var p = $("p:contains('" + keyword + "')"),
            html = p.html(),
            regex = new RegExp("" + keyword, "gi"),
            highlighted = html.replace(regex, "<strong>" + keyword + "</strong>");

        p.html(highlighted);
    }

    $("p").removeClass('show');
    $('#search_content').show();
});

使用jQuery查找p-tag中给定字符串的上一个和下一个10个单词

1 个答案: