2

現在、私が取り組んでいるサイトでは、グローバル ヘッダーを検索すると、検索結果ページが表示されます。検索結果ページに移動すると、URL に検索結果が表示されます。例: ゾウ、search-results.html?elephant を検索しました。検索結果ページで、値に一致するページ上のすべてを強調表示し、値のみを強調表示する必要があります。ハイライトで「検索」または「疑問符の直後の結果」、つまり値を取り上げたくありません。私が見つけた最も近い解決策はこれです

http://www.nsftools.com/misc/SearchAndHighlight.htm

しかし、どういうわけか私のcss divヘッダーを中断します。また、(そして、私の脳は、このコードを長時間見つめているために揚げられているだけかもしれません)、このコードをカスタマイズして値を読み取るにはどうすればよいでしょうか? これも解決策のようですが、うまくいきません。関数 highlightSelection() をボディのオンロードで使用しましたが、運がありませんでした。

http://www.switchonthecode.com/tutorials/javascript-highlighting-selected-text

または、URL から値をキャプチャできれば、Coopster によるここの投稿ですらあります。私は document.write(window.location.search.substr(1)) できることを知っており、それが表示されます。

http://www.webmasterworld.com/forum83/2418.htm

助けてくれてありがとう。

4

2 に答える 2

2

次の内容を使用してみてください: http://docs.jquery.com/Selectors/contains#text

$("span:contains('Hey')").css("text-decoration", "underline");

これに関する問題は、特に検索したいクラスまたは何かが必要です。 *:contains を実行できますが、すべての要素を取得することになります。

http://jsfiddle.net/dLdb2/

JavaScript または使用しているバックエンドを介して $_GET 値を取得する必要はありません。jQueryで取得するためのリンクは次のとおりです。

jqueryで$_GET変数を取得する

于 2013-01-14T21:56:05.673 に答える
1

Chad ソリューションの一部を使用して、特定のテキストを含むスパンを取得できます。次に、HTMLElement 全体に CSS ルールを適用する代わりに、そのコンテンツを で取得し.html()、特定の単語を specific でラップしてから、メソッドでコンテンツを再度<span>更新できます。.html()

// Retrieve and explode URL
var urlParts = window.location.href.split("?");
if (urlParts.length == 2)
{
    // Retrieve all span containing the word
    $("span:contains('" + urlParts[1] + "')").each(function(index, spanElement) {

        var jQSpan = $(spanElement);
        jQSpan.html(jQSpan.html().replace(urlParts[1], '<span class="special">' + urlParts[1] + '</span>'));

    });
}

.special単語を強調表示する CSS クラスがあると仮定します。

.special {
    background-color: yellow;
}

注: Javascript 関数内の単語は、PHP またはその他のサーバー側言語を介して挿入できます。

URL がhttp://path/to/your/file.php?Loremであると仮定した場合の完全な例を次に示します。

<html>
    <head>
        <script type="text/javascript" src="path/to/your/jQuery.js"></script>
    </head>
    <body>
        <span>
            Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
        </span>
        <script type="text/javascript">

            // Start when DOM is ready
            $(document).ready(function() {

                var urlParts = window.location.href.split("?");

                // Highlight word if we have a word in parameter
                if (urlParts.length == 2)
                {
                    // Retrieve all span containing the word
                    $("span:contains('" + urlParts[1] + "')").each(function(index, spanElement) {

                        var jQSpan = $(spanElement);
                        jQSpan.html(jQSpan.html().replace(urlParts[1], '<span class="special">' + urlParts[1] + '</span>'));

                    });
                }
            });

        </script>
    </body>
</html>

説明: DOM の準備ができると、Javascript コードは URL の「?」の後の部分を抽出しようとします。(私たちの場合、これは「Lorem」です)。次に、Javascript は、jQuery を介して、この単語を含むすべてのスパンを取得し、各スパンでループして、単語を特別なスパン (CSS クラス 'special' のスパン) でラップします。

URL の単語を変更してページをリロードすると、ハイライトが動的に変化します

于 2013-01-14T22:05:36.440 に答える