当前位置：首页 > article >正文

Qt开发：QtWebEngine中操作选择文本

article 2025/3/16 20:54:37

查找选择

在QtWebEngine中，可以使用QWebEnginePage的findText方法来查找文本，查找成功以后，将自动选择当前文本。

QWebEnginePage可以通过QWebEngineView的page()来取得。

比如，如下代码可以在页面中查找hello,world并选择。

// view是一个QWebEngineView
auto page = view->page();
page->findText("hello,world");

findText方法的原型为：

void QWebEnginePage::findText(const QString &subString, QWebEnginePage::FindFlags options = {}, const std::function<void (const QWebEngineFindTextResult &)> &resultCallback = std::function<void(const QWebEngineFindTextResult &)>());

可以通过resultCallback这个参数，传递一个回调函数，根据QWebEngineFindTextResult变量，处理查找到的结果。

QWebEngineFindTextResult有两个方法，分别是activeMatch()和numberOfMatches()，分别用来表示当前激活的结果，以及一共查找到的结果总数。

获取选择文本

除了查找这种编程的方式以外，QWebEngineView作为一款浏览器控件，也支持用户手动选择。

当用户通过鼠标选择文本以后，可以通过QWebEnginePage的selectedText()方法来获得文本。

如：

auto text = mPage->selectedText ();
qDebug () << "user selected" << text;

获取选择位置

用户选择文本以后，我们除了想知道这段文本的内容以外，可能还需要知道这段文本的位置。即，这段文本在整个页面中处于什么位置。

QWebEngine并没有直接的方法，来取得一段文本的位置，但是QWebEnginePage有一个runJavaScript()方法，所以我们可以通过执行一些JavaScript，来间接地取得这些信息。

QWebEnginePage的runJavaScript()方法的原型为：


void QWebEnginePage::runJavaScript(const QString &scriptSource, const std::function<void (const QVariant &)> &resultCallback);

void QWebEnginePage::runJavaScript(const QString &scriptSource, quint32 worldId = 0, const std::function<void (const QVariant &)> &resultCallback = {})

即，我们可以通过回调函数，取得执行的JavaScript的结果。

基本的原理如下：

通过window.getSelection()取得所选区域Selection。
通过Selection的getRangeAt取得第一个Range。
分别返回Range的第一个节点的开头的全局偏移量，以及第二个节点的结尾的全局偏移量，为所选文本的偏移。

代码如下：

function getSelectionOffset() {
    const selection = window.getSelection();

    const createOffsetRange = (container， offset) => {
        const range = document.createRange();
        range.setStart(document.documentElement, 0);
        range.setEnd(container, offset);
        return range.toString().length;
    };

    try {
        const range = selection.getRangeAt(0);
        return [createOffsetRange(range.startContainer, range.startOffset), createOffsetRange(range.endContainer, range.endOffset)];
    } catch (error) {
        console.error('Error accessing selection range:', error);
        return [null, null];
    }
}

有了上面的JavaScript，我们就可以通过runJavaScript来获取结果了。

需要注意的是，runJavaScript是异步执行的。

即，如果我们需要在执行JavaScript结束之后，再接着执行runJavaScript后面的过程，需要手动加入同步代码。其中一个方法，是使用一个QEventLoop。

QEventLoop调用exec方法以后，遇到quit才会返回。

如：

  int begin = -1;
  int end = -1;
  QEventLoop loop;
  mPage->runJavaScript (
      R"(
    var selection = window.getSelection();
    if (selection.rangeCount > 0) {
      let range = selection.getRangeAt(0);

      let start = document.createRange();
      start.setStart(document.documentElement, 0);
      start.setEnd(range.startContainer, range.startOffset);
      let startOffset = start.toString().length;

      let end = document.createRange();
      end.setStart(document.documentElement, 0);
      end.setEnd(range.endContainer, range.endOffset);
      let endOffset = end.toString().length;

      [startOffset, endOffset];
    } else {
      [null, null];
    }
  )",
      [&loop, &begin, &end] (const QVariant &result) {
        if (result.isValid () && result.typeId () == QMetaType::QVariantList)
          {
            auto offsets = result.toList ();
            begin = offsets[0].toInt ();
            end = offsets[1].toInt ();
            qDebug () << "Begin offset:" << offsets[0].toInt();
            qDebug () << "End offset:" << offsets[1].toInt();
            loop.quit();  //结束QEventLoop
          }
      });

  loop.exec ();  //上面的loop.quit()之后，这里才返回。

  return std::make_tuple (begin, end);

通过位置选择

能够通过选择取得位置，反过来就可以通过位置，进行选择。方法仍然是通过runJavaScript，这里不再示意runJavaScript的用法，只演示JavaScript代码。

选择的时候，需要根据上一步的全局偏移量，对整个页面的DOM进行遍历，找到相应的节点偏移量。

所以，这里分成三个函数实现：

选择一个节点的部分文本

选中的方法，是新建一个DocumentFragment，把不需要选择的文本，与选择的文本作为子节点加入，之后替换原来的节点为新建的DocumetFragment。

代码如下：

function underlineTextNode(textNode, startOffset, endOffset = -1) {  
    if (!(textNode instanceof Text)) {  
        throw new Error('Invalid text node provided');  
    }  
  
    const textContent = textNode.nodeValue;  
    const validEndOffset = endOffset === -1 ? textContent.length : endOffset;  
  
    if (startOffset < 0 || validEndOffset > textContent.length || startOffset > validEndOffset) {  
        throw new Error('Invalid offset values');  
    }  
  
    const parent = textNode.parentNode;  
    if (!parent) {  
        throw new Error('Text node has no parent element');  
    }  
  
    const beforeText = textContent.slice(0, startOffset);  
    const underlinedText = textContent.slice(startOffset, validEndOffset);  
    const afterText = textContent.slice(validEndOffset);  
  
    const underlineElement = document.createElement('u');  
    underlineElement.textContent = underlinedText;  
  
    const fragment = document.createDocumentFragment();  
    if (beforeText) fragment.appendChild(document.createTextNode(beforeText));  
    fragment.appendChild(underlineElement);  
    if (afterText) fragment.appendChild(document.createTextNode(afterText));  
  
    parent.replaceChild(fragment, textNode);  
}

遍历函数，在回调中确定提前返回

function traverseTextNodes(root, callback) {  
    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null,);  
  
    let node;  
    while ((node = walker.nextNode())) {  
        if (callback(node) === false) break;  
    }  
}

选择所有节点

方法是通过遍历，在回调函数中找到需要选择的所有节点。

然后，依次对每个节点调用第一个选择的函数。

function underlineByOffset(startOffset, endOffset) {  
    if (startOffset >= endOffset || startOffset < 0) {  
        throw new Error('Invalid offset range');  
    }  
  
    let currentOffset = 0;  
    const nodesInfo = {  
        start: {node: null, offset: 0}, end: {node: null, offset: 0}, between: []  
    };  
  
    traverseTextNodes(document.documentElement, (textNode) => {  
        const nodeLength = textNode.nodeValue.length;  
        const nodeEnd = currentOffset + nodeLength;  
  
        if (!nodesInfo.start.node && currentOffset <= startOffset && nodeEnd > startOffset) {  
            nodesInfo.start.node = textNode;  
            nodesInfo.start.offset = startOffset - currentOffset;  
        }  
  
        if (!nodesInfo.end.node && currentOffset <= endOffset && nodeEnd > endOffset) {  
            nodesInfo.end.node = textNode;  
            nodesInfo.end.offset = endOffset - currentOffset;  
            return false;  
        }  
  
        if (nodesInfo.start.node && !nodesInfo.end.node && textNode !== nodesInfo.start.node) {  
            nodesInfo.between.push(textNode);  
        }  
  
        currentOffset = nodeEnd;  
        return true;  
    });  
  
    if (nodesInfo.start.node && nodesInfo.end.node) {  
        underlineTextNode(nodesInfo.start.node, nodesInfo.start.offset, nodesInfo.start.node === nodesInfo.end.node ? nodesInfo.end.offset : -1);  
  
        nodesInfo.between.forEach(node => {  
            underlineTextNode(node, 0);  
        });  
  
        if (nodesInfo.start.node !== nodesInfo.end.node) {  
            underlineTextNode(nodesInfo.end.node, 0, nodesInfo.end.offset);  
        }  
    }  
}