JavaFx |搜索和突出显示文本 |为加载的网页添加搜索栏 [英] JavaFx | Search and Highlight text | Add Search Bar for loaded web page

问题描述

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

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

在谷歌搜索和自我实验后，我没有找到办法.谁能给我一个开始编写这种能力的方向.

解决方案

基于 JavaScript 的解决方案的建议

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

对基于 Java 的解决方案的建议

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

在 JavaFX WebView 核心实现中获取 Search API

我创建了功能请求 RT-23383 对 WebView 的文本搜索支持.功能请求当前处于开放状态且未采取任何行动 - 您可以在问题跟踪器中创建一个帐户，并对功能请求进行投票或评论.

示例

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

我试图让它与任意网页一起工作，但这种逻辑打败了我.如果您控制了要搜索的页面的来源，并且可以将 jQuery 高亮插件的引用和它的样式类添加到您的页面中，那么像这个示例程序这样的程序可能是一个选择.

import javafx.application.Application;导入 javafx.event.*;导入 javafx.scene.Scene;导入 javafx.scene.control.*;导入 javafx.scene.layout.*;导入 javafx.scene.web.*;导入 javafx.stage.Stage;公共类 WebViewSearch 扩展应用程序 {公共静态无效主(字符串 [] args){发射(参数)；}@覆盖公共无效开始(阶段primaryStage){最终的 WebView webView = new WebView();最终的 WebEngine 引擎 = 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 突出显示");searchField.setOnAction(new EventHandler() {@覆盖公共无效句柄(ActionEvent actionEvent){如果 (engine.getDocument() != null) {强调(引擎，searchField.getText());}}});final Button highlightButton = new Button("Highlight");highlightButton.setDefaultButton(true);highlightButton.setOnAction(new EventHandler() {@覆盖公共无效句柄(ActionEvent actionEvent){searchField.fireEvent(new ActionEvent());}});final Button removeHighlightButton = new Button("Remove Highlight");removeHighlightButton.setOnAction(new EventHandler() {@覆盖公共无效句柄(ActionEvent actionEvent){删除高亮(引擎);}});removeHighlightButton.setCancelButton(true);HBox 控件 = new HBox(10);control.getChildren().setAll(突出显示按钮，移除高亮按钮);VBox 布局 = 新 VBox(10);layout.getChildren().setAll(searchField, 控件, webView);searchField.setMinHeight(Control.USE_PREF_SIZE);control.setMinHeight(Control.USE_PREF_SIZE);control.disableProperty().bind(webView.getEngine().getLoadWorker().runningProperty());searchField.disableProperty().bind(webView.getEngine().getLoadWorker().runningProperty());primaryStage.setScene(新场景(布局))；primaryStage.show();webView.requestFocus();}私有无效突出显示(WebEngine引擎，字符串文本){engine.executeScript("$('body').removeHighlight().highlight('" + text + "')");}私有无效 removeHighlight(WebEngine 引擎){engine.executeScript("$('body').removeHighlight()");}}

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.

解决方案

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

}

这篇关于JavaFx |搜索和突出显示文本 |为加载的网页添加搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！