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

查找选择

在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);  }  }  
}