JavaFx | Search and Highlight text | Add Search Bar for loaded web page

Question

I used the SimpleSwingBrowser example (http://docs.oracle.com/javafx/2/swing/SimpleSwingBrowser.java.htm) and added some code of my own for log tailing.

I wanted to add a search bar ability to it (Search and Highlight text).

After googling for hours and self experiments, I didn't find a way to do it. Can someone give me a kick-off direction for writing such ability.

Answer 1

Suggestions for a JavaScript based solution

Use an existing JavaScript highlighting library such as jQuery highlight or hilitor.js.

Suggestions for a Java based solution

Use the Java w3c DOM API to perform operations on the WebEngine document object after the document has been loaded.

To get a Search API in the JavaFX WebView core implementation

I created feature request RT-23383 Text search support for WebView. The feature request is currently open and unactioned - you can create an account in the issue tracker and vote for or comment on the feature request.

Sample

This sample uses jQuery highlight. The user types the word to be highlighted into the text field, then presses the highlight button to highlight all occurrences of the word in the page or to remove highlight button to clear all marked highlights. You could modify the sample to allow further jQuery based searches to scroll to a next and previously highlighted word.

I tried to get it to work with any arbitrary web page, but that logic defeated me. If you control the source of the page you want to search and can add the reference to the jQuery highlight plugin and it's style class to your page, something like this sample program might be an option.

import javafx.application.Application;
import javafx.event.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.web.*;
import javafx.stage.Stage;

public class WebViewSearch extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        final WebView webView = new WebView();
        final WebEngine engine = webView.getEngine();
        engine.load("http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html");

        final TextField searchField = new TextField("light");
        searchField.setPromptText("Enter the text you would like to highlight and press ENTER to highlight");
        searchField.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                if (engine.getDocument() != null) {
                    highlight(
                            engine,
                            searchField.getText()
                    );
                }
            }
        });

        final Button highlightButton = new Button("Highlight");
        highlightButton.setDefaultButton(true);
        highlightButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                searchField.fireEvent(new ActionEvent());
            }
        });
        final Button removeHighlightButton = new Button("Remove Highlight");
        removeHighlightButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                removeHighlight(
                        engine
                );

            }
        });
        removeHighlightButton.setCancelButton(true);

        HBox controls = new HBox(10);
        controls.getChildren().setAll(
                highlightButton,
                removeHighlightButton
        );

        VBox layout = new VBox(10);
        layout.getChildren().setAll(searchField, controls, webView);
        searchField.setMinHeight(Control.USE_PREF_SIZE);
        controls.setMinHeight(Control.USE_PREF_SIZE);

        controls.disableProperty().bind(webView.getEngine().getLoadWorker().runningProperty());
        searchField.disableProperty().bind(webView.getEngine().getLoadWorker().runningProperty());

        primaryStage.setScene(new Scene(layout));
        primaryStage.show();

        webView.requestFocus();
    }

    private void highlight(WebEngine engine, String text) {
        engine.executeScript("$('body').removeHighlight().highlight('" + text + "')");
    }

    private void removeHighlight(WebEngine engine) {
        engine.executeScript("$('body').removeHighlight()");
    }

}