如何使用 Swift 在 WebView 中查找和突出显示文本

Question

我正在开发我的第一个应用程序，它涉及从网站上的大量文本中搜索特定的文本字符串。我希望能够搜索特定字符串并突出显示所有实例，并且随着用户键入更多内容，它会自动更新突出显示的事件。类似于任何浏览器中的查找功能。

我在这里找到了这个问题，他们引用使用 UIWebViewSearch.js 来实现这一点，但我不确定如何将该文件添加到我的项目中，或者如何使用它。

到目前为止，我已经在我的应用程序中添加了一个搜索栏，但还没有对它做任何事情。想用这个功能和搜索栏一起搜索文本。

这是我的 ViewController 代码：

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var webView: UIWebView!
@IBOutlet weak var searchBar: UISearchBar!

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    // Place custom HTML onto the screen
    let myURL = Bundle.main.url(forResource: "myHTML", withExtension: "html")
    let requestObj = URLRequest(url: myURL!)
    webView.loadRequest(requestObj)


    // Code that provides a string containing
    // JS code, ready to add to a webview.
    if let path = Bundle.main.path(forResource: "UIWebViewSearch", ofType: "js"),
        let jsString = try? String(contentsOfFile: path, encoding: .utf8) {
        print(jsString)
    } // end if


    func searchBarSearchButtonClicked() {
        let startSearch = "uiWebview_HighlightAllOccurencesOfString('\(str)')"

        self.newsWebView .stringByEvaluatingJavaScript(from: startSearch)
    }


} // end of viewDidLoad


override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
} // end of didReceiveMemoryWarning


} // end of class ViewController

Answer 1

正如@jon-saw 所说：欢迎使用 StackOverflow :)

我只会回答你如何将 JavaScript 文件添加到你的项目中......这应该能让事情开始:)

添加文件

您可以通过多种方式将文件添加到 Xcode，但这里是一种。

1. 在 Xcode 中，在您的项目中，在左侧的项目导航器中导航到您想要添加文件的位置。

2. 右键单击并选择“新建文件...”

3. 选择“空”，然后单击“下一步”

4. 命名您的文件UIWebViewSearch.js，然后单击“创建”

5. 您现在UIWebViewSearch.js在项目中调用了一个空文件，您可以在其中粘贴内容。

使用文件

现在您的项目中有该文件，所以现在您只需要引用它。为此，您可以使用Bundlewhich 可以为您加载项目中的资源。

如果你看看你提到的答案，你可以看到这些 ObjC 代码行- (NSInteger)highlightAllOccurencesOfString:(NSString*)str

NSString *path = [[NSBundle mainBundle] pathForResource:@"UIWebViewSearch" ofType:@"js"];
NSString *jsCode = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

转换为 Swift 看起来像这样：

if let path = Bundle.main.path(forResource: "UIWebViewSearch", ofType: "js"),
   let jsString = try? String(contentsOfFile: path, encoding: .utf8) {
    print(jsString)
}

这应该会给你一个String包含所有 JS 代码的文件，例如准备添加到 WebView。

希望能给你一些开始。

更新（在您对此帖子添加评论后）

好的，所以你说：

我添加了我的 ViewController 代码以更好地传达我所处的位置。对如何实现您所指的他的代码的第二部分感到困惑。也不确定如何从搜索栏调用搜索。是否有我需要在“searchBarSearchButtonClicked()”方法中调用的方法？刚刚在苹果开发人员文档中找到了该方法，但不知道它是否正确。

让我们把它分解成几部分，我将从你的 开始ViewController，因为你的存在一些问题viewDidLoad：

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    // Place custom HTML onto the screen
    let myURL = Bundle.main.url(forResource: "myHTML", withExtension: "html")
    let requestObj = URLRequest(url: myURL!)
    webView.loadRequest(requestObj)
    // Code that provides a string containing
    // JS code, ready to add to a webview.
    if let path = Bundle.main.path(forResource: "UIWebViewSearch", ofType: "js"),
        let jsString = try? String(contentsOfFile: path, encoding: .utf8) {
        print(jsString)
    } // end if


    func searchBarSearchButtonClicked() {
        let startSearch = "uiWebview_HighlightAllOccurencesOfString('\(str)')"

        self.newsWebView .stringByEvaluatingJavaScript(from: startSearch)
    }
}

你已经添加了你的searchBarSearchButtonClicked inside viewDidLoad，但它应该自己声明为一个函数（我们稍后会回到它）。

此外，正如我在下面的评论中所写：

...在加载视图时运行的一个部分，它从包中加载 JavaScript。

所以让我们修复你的viewDidLoad：

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    // Place custom HTML onto the screen
    let myURL = Bundle.main.url(forResource: "myHTML", withExtension: "html")
    let requestObj = URLRequest(url: myURL!)
    webView.loadRequest(requestObj)
    // Code that provides a string containing
    // JS code, ready to add to a webview.
    if let path = Bundle.main.path(forResource: "UIWebViewSearch", ofType: "js"),
        let jsString = try? String(contentsOfFile: path, encoding: .utf8) {
        print(jsString)
        //Use your jsString on the web view here.
        newsWebView.stringByEvaluatingJavaScript(from: jsString) 
    }
}

如您所见，该searchBarSearchButtonClicked功能已被删除，我们现在jsString在newsWebView.

好的，下一部分：

也不确定如何从搜索栏调用搜索。是否有我需要在“searchBarSearchButtonClicked()”方法中调用的方法？刚刚在苹果开发人员文档中找到了该方法，但不知道它是否正确。

你有你searchBarSearchButtonClicked()在 Apple Developer 文档中找到的方法，我猜你的意思是这个

正如您在文档（顶部栏）中所见，此函数来自UISearchBarDelete类。

委托是许多 Apple 框架中使用的设计模式。它允许您编写一些通用组件，并让“其他人”（委托）决定如何处理来自组件的信息（我知道错误的解释）。

想想你UISearchBar的例子。如果您要实现一个其他开发人员可以用作搜索栏的组件，当用户搜索某些内容时，您将如何处理？我在想，您的“客户”（使用您的组件的开发人员）应该如何处理这个问题？这样做的一种方法可能是开发人员应该子类化UISearchBar并覆盖“用户确实搜索方法”。您还可以使用NSNotifications这些通知并让开发人员注册这些通知。这两种方法都不漂亮也不聪明。

进入……代表。

UISearchBar如您所见，有一个UISearchBarDelegate和UISearchBarDelegate只是一个协议。现在UISearchBar可以向其委托人询问某些事情，或者将重要事件通知委托人。例如，当用户点击“搜索”按钮时，UISearchBar可以调用delegate.searchBarSearchButtonClicked(self)这意味着“嘿，委托，用户点击了我的搜索按钮......只是想你应该知道”。然后代表可以按照它认为合适的方式做出响应。

这意味着任何类都可以适应UISearchBarDelegate并处理适合其当前情况的各种任务。

好的，长话短说，希望你明白它的要点，我认为你应该多读一点关于委托的内容，因为它是 Apples 框架中到处使用的模式:)

所以，在你的情况下，你有一个UISearchBar，你应该给它一个像这样的委托：

searchBar.delegate = self

并且您需要告诉编译器您打算实现该UISearchBarDelegate协议。Swift 约定是extension在您的之后执行此操作ViewController，只是为了将事情分开：

extension ViewController: UISearchBarDelegate {

}

然后你还必须实现UISearchBarDelegate你有兴趣听的方法（注意一些协议需要方法，这意味着你必须实现它们但我认为UISearchBar没有（否则你会发现应用程序崩溃时第一次运行它:))。

所以在你的情况下，你提到了searchBarSearchButtonPressed. 如您所见，它需要 aUISearchBar作为参数。所以你的函数最终看起来像这样：

func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
    guard let currentSearchText = searchBar.text else {
        return
    }
    let startSearch = "uiWebview_HighlightAllOccurencesOfString('\(currentSearchText)')"

    newsWebView.stringByEvaluatingJavaScript(from: startSearch)
}

所以...您从搜索栏中获取当前文本，将其作为参数添加到您的startSearch字符串中，然后将该startSearch字符串传递给您的newsWebView.

整个扩展看起来像这样。

.... last part of your ViewController class
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    } // end of didReceiveMemoryWarning
} // end of class ViewController

extension ViewController: UISearchBarDelegate {
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        guard let currentSearchText = searchBar.text else {
            return
        }
        let startSearch = "uiWebview_HighlightAllOccurencesOfString('\(currentSearchText)')"

        newsWebView.stringByEvaluatingJavaScript(from: startSearch)
    }
}

你的viewDidLoad结果看起来像这样（你必须将自己添加为 searchBar 的委托）

override func viewDidLoad() {
    super.viewDidLoad()
    searchBar.delegate = self //delegate set up
    // Do any additional setup after loading the view, typically from a nib.

    // Place custom HTML onto the screen
    let myURL = Bundle.main.url(forResource: "myHTML", withExtension: "html")
    let requestObj = URLRequest(url: myURL!)
    webView.loadRequest(requestObj)
    // Code that provides a string containing
    // JS code, ready to add to a webview.
    if let path = Bundle.main.path(forResource: "UIWebViewSearch", ofType: "js"),
        let jsString = try? String(contentsOfFile: path, encoding: .utf8) {
        print(jsString)
        //Use your jsString on the web view here.
        newsWebView.stringByEvaluatingJavaScript(from: jsString) 
    }
} 

哇……写了很多……希望对你有帮助。