Swift 4下如何在WKWebView中识别单次点击的单词？

嘿，我来帮你搞定这个问题～首先，document.caretRangeFromPoint()在现代WKWebKit里已经被废弃了，这大概率是你方法失效的核心原因！另外还有几个坐标转换和单词选中的细节需要调整，我一步步给你拆解：

1. 替换废弃的API：改用caretPositionFromPoint() #

document.caretRangeFromPoint()已经被Web标准弃用，WKWebKit作为遵循WebKit内核的组件，已经不再支持它。取而代之的是document.caretPositionFromPoint()，我们可以用它获取光标位置后再转换为Range对象，进而选中完整单词。

2. 正确转换点击坐标到Web文档坐标系 #

UIKit的点击坐标是以屏幕左上角为原点的，但Web文档的坐标是以文档自身左上角为原点，还需要考虑WebView的滚动偏移和缩放比例。如果坐标没转换对，JS就会定位到错误的位置。

3. 扩展光标范围到完整单词 #

默认获取的光标位置只是单个字符，我们需要向前后扩展，匹配整个单词的边界（通过正则判断字符是否为单词字符）。

// 给WKWebView添加点击手势
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleWordTap(_:)))
// 解决手势冲突：允许和WebView自带手势同时识别
tapGesture.delegate = self
webView.addGestureRecognizer(tapGesture)

// 手势处理方法
@objc func handleWordTap(_ gesture: UITapGestureRecognizer) {
    let tapPoint = gesture.location(in: webView)
    let scrollView = webView.scrollView
    
    // 转换坐标：加上滚动偏移，适配Web文档坐标系
    let webCoordinate = CGPoint(
        x: tapPoint.x + scrollView.contentOffset.x,
        y: tapPoint.y + scrollView.contentOffset.y
    )
    
    // 执行JS获取选中的单词
    let wordDetectionJS = """
    function extractWordAtPosition(x, y) {
        // 获取光标位置（现代API）
        const caretPos = document.caretPositionFromPoint(x, y);
        if (!caretPos) return null;
        
        let range = caretPos.getRangeAt(0);
        let textNode = caretPos.offsetNode;
        
        // 处理非文本节点：尝试找到子文本节点
        if (textNode.nodeType !== Node.TEXT_NODE) {
            textNode = textNode.firstChild;
            if (!textNode || textNode.nodeType !== Node.TEXT_NODE) return null;
            range.setStart(textNode, 0);
        }
        
        // 扩展范围到完整单词
        let startIdx = caretPos.offset;
        let endIdx = startIdx;
        const textContent = textNode.textContent;
        
        // 向前遍历找单词起始
        while (startIdx > 0 && /\\w/.test(textContent[startIdx - 1])) {
            startIdx--;
        }
        // 向后遍历找单词结束
        while (endIdx < textContent.length && /\\w/.test(textContent[endIdx])) {
            endIdx++;
        }
        
        // 更新Range范围
        range.setStart(textNode, startIdx);
        range.setEnd(textNode, endIdx);
        
        return range.toString().trim();
    }
    extractWordAtPosition(\(webCoordinate.x), \(webCoordinate.y));
    """
    
    // 执行JS并处理结果
    webView.evaluateJavaScript(wordDetectionJS) { result, error in
        if let selectedWord = result as? String, !selectedWord.isEmpty {
            // 这里把单词传递到你的单独视图
            print("选中的单词：\(selectedWord)")
            // 示例：self.wordPreviewLabel.text = selectedWord
        } else {
            print("未找到可选中的单词：\(error?.localizedDescription ?? "未知错误")")
        }
    }
}

// MARK: - UIGestureRecognizerDelegate
extension YourViewController: UIGestureRecognizerDelegate {
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        // 允许点击手势和WebView自带手势共存
        return true
    }
}

• 如果网页包含iframe、复杂绝对定位元素，可能需要额外处理节点遍历逻辑，但普通文本场景上面的代码完全够用。
• 测试时可以在JS里加入console.log(caretPos)，通过Safari的WebInspector查看是否获取到了正确的光标位置，方便排查问题。

内容的提问来源于stack exchange，提问作者Tim Kolar