Question

我想使用jQuery选择并返回搜索的文本。

问题是;部分文字可能位于或其他内嵌元素中，因此在此文字中搜索'waffles are tasty'：'I'm not sure about cabbages, but waffles are tasty, indeed.'时，您将无法获得任何匹配，而文字则不会中断给人们。

我们以此HTML为例：

<div id="parent">
  <span style="font-size: 1.2em">
    I
  </span>
  like turtles 
  <span>
    quite a
  </span>
  lot, actually.

  <span>
    there's loads of
  </span>
  tortoises over there, OMG

  <div id="child">
    <span style="font-size: 1.2em">
      I
    </span>
    like turtles 
    <span>
      quite a
    </span>
    lot, actually.

    TURTLES!
  </div>
</div>

使用此（或类似）JavaScript：

$('div#parent').selectText({query: ['i like', 'turtles', 'loads of tortoises'], caseinsensitive: true}).each(function () {
  $(this).css('background-color', '#ffff00');
});
//The (hypothetical) SelectText function would return an array of wrapped elements to chain .each(); on them

您可能希望产生此输出:(显然没有注释）

<div id="parent">
  <span style="font-size: 1.2em">
    <span class="selected" style="background-color: #ffff00">
      I
    </span> <!--Wrap in 2 separate selection spans so the original hierarchy is disturbed less (as opposed to wrapping 'I' and 'like' in a single selection span)-->
  </span>
  <span class="selected" style="background-color: #ffff00">
    like
  </span>
  <span class="selected" style="background-color: #ffff00"> <!--Simple match, because the search query is just the word 'turtles'-->
    turtles
  </span> 
  <span>
    quite a
  </span>
  lot, actually.

  <span>
    there's
    <span class="selected" style="background-color: #ffff00">
      loads of
    </span> <!--Selection span needs to be closed here because of HTML tag order-->
  </span>
  <span class="selected" style="background-color: #ffff00"> <!--Capture the rest of the found text with a second selection span-->
    tortoises
  </span>
  over there, OMG

  <div id="child"> <!--This element's children are not searched because it's not a span-->
    <span style="font-size: 1.2em">
      I
    </span>
    like turtles 
    <span>
      quite a
    </span>
    lot, actually.

    TURTLES!
  </div>
</div>

（假设的）SelectText函数会将所有选定的文本包装在标记中，无论搜索的某些部分是否位于其他内联元素中，如，'等它不会搜索子<div>的内容，因为它不是内联元素。

是否有一个jQuery插件可以做这样的事情？（在span标签中包装搜索查询并返回它们，不知道找到的文本的某些部分是否可能位于其他内联元素中？）

如果没有，怎么会创建这样的功能呢？ This function有点像我正在寻找的东西，但当找到的文本的一部分嵌套在其他内联元素中时，它不会返回选定的跨度和中断数组。

非常感谢任何帮助！

Answer 1

一块蛋糕！请参阅this。

折叠符号：

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

在线表示法：

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

Answer 2

三个选项：

使用浏览器的内置方法。对于该发现，IE具有TextRange方法findText();其他浏览器（Opera上次，我上次检查过，很久以前）有window.find()。但是，window.find() may be killed off without being replaced在某些时候，这并不理想。要突出显示，您可以使用document.execCommand()。
使用我的Rangy库。这里有一个演示：http://rangy.googlecode.com/svn/trunk/demos/textrange.html
构建您自己的代码以搜索DOM中的文本内容并为其设置样式。

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

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

Answer 3

因为我刚才正在做类似的事情，如果你想看到我对“选项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 dev参考站点 https://developer.mozilla.org/en-US/docs/Web/API/Node）

Answer 4

我写了草稿fiddle。主要步骤：

我为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()

主要思想是将...包含在未被标记分隔的每个短语中，但不分析整个节点树。

注：

它不适用于html中的...标记。你必须在regexp字符串中进行更正。我不保证它可以与unicode一起使用。但谁知道......

Answer 5

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

查看 David Herbert Lawrence 诗：

<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

我无法像这样wild thing sorry for包装它，然后通过一些临时id =“search-xxxxxx”创建jQuery选择器，并将其返回 - 这是错误的html。我可以像这样包装每一段文字：

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

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

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

现在我们有两个“结果”：a）“ wild thing ”; b）“抱歉”。这真的是你想要的吗？

或

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

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

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

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

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

5 个答案: