Найти предыдущие и следующие 10 слов данной строки внутри p-тега с помощью jQuery

0

Я разрабатываю проект с помощью 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-mans 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/

Заранее спасибо...

Теги:

1 ответ

3

может быть, что-то вроде этого:

$('#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();
});
Поделиться
  • 0
    Да, это работает: jsfiddle.net/3fTD3
  • 0
    @ Алекс Спасибо. Мне нужно нарезать строку до и после этого выделенного слова. Вы можете мне помочь
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню