Android webview: markieren Sie ein bestimmtes Wort in einer Seite mit Javascript?

Question

Ich verwende ein Webview innerhalb meiner Android-Anwendung. Ich würde gerne wissen, ob es möglich ist, ein bestimmtes Wort/Satz/Absatz in einer geladenen Seite mit Code in Javascript zu markieren oder zu unterstreichen?

danke

Answer 1

Warum können Sie das nicht ausprobieren? titleWebView ist die WebView, in der die HTML-Datei geladen ist oder geladen werden soll. searchText sollte den zu durchsuchenden Text enthalten. Ich habe einen Dialog konstruiert, um die Suchbegriffe vom Benutzer zu erhalten und die Webseite jedes Mal neu zu laden, wenn der Benutzer auf die Suche drückt. Alle Begriffe, die den searchText enthalten, werden hervorgehoben (hellgrün auf meinem Nexus One). Ich hoffe, das hilft.

titleWebView.setWebViewClient(new WebViewClient() {

    @Override
    public void onPageFinished(WebView view, String url) {
        if (searchText != null && !searchText.equals("")) {
            int i = titleWebView.findAll(searchText);
            Toast.makeText(getApplicationContext(), "Found " + i + " results !",
                Toast.LENGTH_SHORT).show();
            try {
                Method m = WebView.class.getMethod("setFindIsUp", Boolean.TYPE);
                m.invoke(titleWebView, true);
            } catch (Throwable ignored) {
            }
            searchText = "";
        }
    }
});

Answer 2

Sie sollten sich ansehen diese Seite . Machen Sie eine Ansicht Quelle.

Sie verwenden reines Javascript - nicht einmal jQuery - um bestimmte Wörter auf der Webseite hervorzuheben.

Im Grunde laden sie den gesamten zu durchsuchenden Text in eine Variable und suchen fortlaufend die indexOf den Suchbegriff, den sie hervorheben möchten. Wenn sie den Index des Begriffs finden, erstellen sie eine neue Zeichenkette mit allem, was vor diesem Index steht, + ein <span class="highlighted"> + der Suchbegriff + </span> . Dann setzen sie die Suche fort. Sobald sie den gesamten Text durchsucht und neu erstellt haben, ersetzen sie den alten Text im DOM durch den neuen Text.

Sie haben auch einige CSS in der Art von .highlighted { background-color: yellow; }

Answer 3

FindAll() ist veraltet! Sie können findAllAsync() ab API16 auf einfache Weise wie folgt verwenden:

webView.setWebViewClient(new WebViewClient(){
            @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
            @Override
            public void onPageFinished(WebView view, String url) {
                if (searchText != null && !searchText.equals("")) {
                    webView.findAllAsync(searchText);
                }
            }
        });

Answer 4

Code

Method m = WebView.class.getMethod("setFindIsUp", Boolean.TYPE);
m.invoke(titleWebView, true);

Nach diesem Test verwenden Sie den folgenden Code.

findAll("search text")

Wenn der Text übereinstimmt Toast Anzeige.