jQuery跨标签突出显示元素中的文本片段

小菜一碟！看到这里。

折叠符号：

$.each(
    $(...).findText(...), 
    function (){
        ...
    }
);

内联表示法：

$(...).findText(...).each(function (){
        ...
    }
);

三个选项：

• 为此，请使用浏览器的内置方法。对于这一发现，IE TextRange了其findText()方法;其他浏览器（除了 Opera，上次我检查，那是很久以前的事了）有 window.find() .但是，window.find()可能会在某个时候被杀死而不被替换，这并不理想。对于突出显示，您可以使用 document.execCommand() .
• 使用我的 Rangy 库。这里有一个演示：http://rangy.googlecode.com/svn/trunk/demos/textrange.html
• 构建自己的代码以在 DOM 中搜索文本内容并设置其样式。

此答案更详细地介绍了前两个选项：

https://stackoverflow.com/a/5887719/96100

由于我现在碰巧正在做类似的事情，如果你想看看我对"选项 3"的解释的开始，我想我会分享这个，主要特点是遍历所有文本节点，而不会改变现有标签。尚未在任何不寻常的浏览器中进行测试，因此对此没有任何保证！

function DOMComb2 (oParent) {
    if (oParent.hasChildNodes()) {
        for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
            if (oNode.nodeType==3 && oNode.nodeValue) { // Add regexp to search the text here
                var highlight = document.createElement('span');
                highlight.appendChild(oNode.cloneNode(true));
                highlight.className = 'selected';
                oParent.replaceChild(highlight, oNode);
                // Or, the shorter, uglier jQuery hybrid one-liner
                // oParent.replaceChild($('<span class="selected">' + oNode.nodeValue + '</span>')[0], oNode);
            }
            if (oNode.tagName != 'DIV') { // Add any other element you want to avoid
                DOMComb2(oNode);
            }
        }
    }
}

然后也许使用 jQuery 有选择地搜索内容：

$('aside').each(function(){
    DOMComb2($(this)[0]);
});

当然，如果你的旁白中有旁白，可能会发生奇怪的事情。

（DOMComb 函数改编自 Mozilla 开发参考网站https://developer.mozilla.org/en-US/docs/Web/API/Node）

我写了一稿作为小提琴。主要步骤：

我为jQuery做了一个插件

$.fn.selectText = function(params){
    var phrases = params.query, 
        ignorance = params.ignorecase;
        wrapper = $(this);
    . . .
    return(wrapper);
};

现在我可以将选择称为$(...).selectText({query:["tortoise"], ignorance: true, style: 'selection'});

我知道你想在函数调用后有迭代器，但在你的情况下这是不可能的，因为迭代器必须返回有效的jQuery选择器。例如： word <tag>word word</tag> word不是有效的选择器。

的内容后，对于每个搜索makeRegexp()进行个人正则表达式。

每个搜索的 html 源转到emulateSelection()，然后wrapWords()

主要思想是包装<span class="selection">...</span>每个短语，而不是用标签分隔，但不分析整个节点树。

注意：

它不适用于 html 中的<b><i>...标签。您必须在正则表达式字符串中进行更正。我不保证它可以与 unicode 一起使用。但谁知道呢...

据我了解，我们谈论的是像$.each($(...).searchText("..."),function (str){...});这样的迭代器。

看看大卫·赫伯特·劳伦斯的诗：

<div class="poem"><p class="part">I never saw a wild thing<br /> 
sorry for itself.<br /> 
A small bird will drop frozen dead from a bough<br />
without ever having felt sorry for itself.<br /></p></div>

实际上，渲染后，浏览器会这样理解它：

<div class="poem">
<p class="part">
<br>I never saw a wild thing</br> 
<br>sorry for itself.</br> 
<br>A small bird will drop frozen dead from a bough</br>
<br>without ever having felt sorry for itself.</br> 
</p>
</div>

例如，我寻找短语："wild thing sorry for" .因此，我必须强调一下：

wild thing</br><br>sorry for

我不能像这样包装它<span>wild thing</br><br>sorry for</span>，然后通过一些临时id="search-xxxx"创建jQuery选择器，并将其返回 - 这是错误的html。我可以像这样包装每段文本：

<span search="search-xxxxx">wild thing</span></br><br><span search="search-xxxxx">sorry for</span>

然后我必须调用一些函数并返回选择器的jQuery数组：

return($("[search=search-xxxxx]"));

现在我们有两个"结果"：a）"野物";b） "对不起"。这真的是你想要的吗？

或

你必须像另一个插件一样编写你自己的函数each() jQuery：

$.fn.eachSearch = function(arr, func){
    ...
};

其中 arr 不是选择器数组，而是选择器数组数组，例如：

arr = [
    {selector as whole search},
    {[{selector as first part of search]}, {[selector as second part of search]}},
    ...    
]