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

}