营销网站费用好看的网站建设公司
查找选择
在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); } }
}