6

尊敬されるメンバー、

私は1つのテンプレートの助けを借りて純粋なHTMLでウェブサイトをデザインしています。

その中で私は1つのテキストボックス[検索]と移動ボタンを持っています。

誰かが特定のテキストを入力して[移動]ボタンを押すと、そのテキストに一致するそのWebサイトのテキストが強調表示されるように操作したいと思います。

どうやってやるの？

あなたより。

4

3 に答える 3

11 
$(document).ready(function(){
        $('#searchItem').keyup(function(){
            var name = $(this).val();
            var pattern = name.toLowerCase(); 
            var targetId = ""; 
            var divs = document.getElementsByClassName("item"); 

            $(document).find('.item').hide();

            $('.item').each(function(i){
                var para = divs[i].getElementsByTagName("p"); 
                var index = para[0].innerText.toLowerCase().indexOf(pattern); 
                if (index != -1) { 
                    $(this).show();
                }
            });
        }); 
    });
于 2012-12-10T10:40:10.367 に答える
5

あなたが持っているものを投稿していません。これはあなたが言及していることだと思います。

これをチェックして。私はあなたのためにこれを行うことができますが、あなたはあなたの考えでそれをしなければなりません

function highlightInElement(elementId, text){
var elementHtml = document.getElementById(elementId).innerHTML;
var tags = [];
var tagLocations= [];
var htmlTagRegEx = /<{1}\/{0,1}\w+>{1}/;

//Strip the tags from the elementHtml and keep track of them
var htmlTag;
while(htmlTag = elementHtml.match(htmlTagRegEx)){
    tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx);
    tags[tags.length] = htmlTag;
    elementHtml = elementHtml.replace(htmlTag, '');
}

//Search for the text in the stripped html
var textLocation = elementHtml.search(text);
if(textLocation){
    //Add the highlight
    var highlightHTMLStart = '<span class="highlight">';
    var highlightHTMLEnd = '</span>';
    elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd);

    //plug back in the HTML tags
    var textEndLocation = textLocation + text.length;
    for(i=tagLocations.length-1; i>=0; i--){
        var location = tagLocations[i];
        if(location > textEndLocation){
            location += highlightHTMLStart.length + highlightHTMLEnd.length;
        } else if(location > textLocation){
            location += highlightHTMLStart.length;
        }
        elementHtml = elementHtml.substring(0,location) + tags[i] + elementHtml.substring(location);
    }
}

//Update the html of the element
document.getElementById(elementId).innerHTML = elementHtml;
}

highlightInElement("fatDoggie","The dog is really really fat");

このフィドルは、一連のテキストを強調表示するために作成されました。代わりに、変数を検索して取得し、highlightInElement("Element","Var");

于 2012-12-10T10:44:28.320 に答える
1

1ページのサイトを持っているということですか？この場合、コンテンツ全体が既にページにロードされており、それを検索したいだけです。Javascript と JQuery を使用すると、非常に簡単に実行できます。ボタンのクリックをキャッチし、DOM をトラバースして文字列を探し、それに対して何かを行います (たとえば、そこまでスクロールするか、強調表示します)。

複数のページがある場合、すべてのコンテンツをクライアント側で利用できるわけではないため、これはより困難になります。この場合、サーバー側の検索ソリューションの方が適しています。

于 2012-12-10T10:40:45.463 に答える