html - JavaFX |搜索并突出显示文本 |为加载的网页添加搜索栏

Question

我使用了 SimpleSwingBrowser 示例 ( http://docs.oracle.com/javafx/2/swing/SimpleSwingBrowser.java.htm ) 并添加了一些我自己的代码用于日志尾随。

我想为其添加搜索栏功能(搜索和突出显示文本)。

经过几个小时的谷歌搜索和 self 实验，我没有找到一种方法。 有人可以给我一个编写这样的能力的启动方向吗？

Answer 1

基于 JavaScript 的解决方案的建议

使用现有的 JavaScript 突出显示库，例如 jQuery highlight或hilitor.js .

基于 Java 的解决方案的建议

在文档加载后，使用 Java w3c DOM API 对 WebEngine 文档对象执行操作。

在 JavaFX WebView 核心实现中获取搜索 API

我创建了功能请求 RT-23383 Text search support for WebView 。该功能请求当前处于开放状态且尚未采取行动 - 您可以在问题跟踪器中创建一个帐户并对功能请求进行投票或发表评论。

示例

此示例使用 jQuery 高亮显示。用户在文本字段中键入要突出显示的单词，然后按突出显示按钮突出显示页面中出现的所有单词，或者删除突出显示按钮以清除所有标记的突出显示。您可以修改示例以允许进一步基于 jQuery 的搜索滚动到下一个和之前突出显示的单词。

我试图让它适用于任何任意网页，但这种逻辑打败了我。如果您控制要搜索的页面的源，并且可以添加对 jQuery 高亮插件及其样式类的引用到您的页面，则可以选择像此示例程序这样的内容。

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()");
    }

}