jQuery 搜索 (:contains) 没有标点符号，不包括特定的类

Question

目前我在 html 文件中的 div 中搜索，如果在其中找到结果，则删除 hideMe 类，以显示找到的赞美诗。我想知道我是否可以在没有标点符号的情况下搜索赞美诗（从输入和输出中删除标点符号），同时从搜索中排除 info 类。

<div id="himnario">
   <div id="1" class="song hideMe">
      <div class="info">I don't want this info to be searched</div>
      <div class="tuneName">This tune should be searched</div>
      <ol>
         <li>Verse 1</li>
         <li>Verse 2</li>
      </ol>
   </div>
   <div id="2" class="song hideMe">...</div>
</div>

我目前的搜索代码是：

$("#himnario div.song:Contains("+item+")").removeClass('hideMe').highlight(item);
isHighlighted = true; //check if highlighted later and unhighlight, for better performance

（用“包含”扩展jquery如下）

return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 

另外，我使用jquery plugin 来突出显示结果，所以我想这会使事情复杂化。如果需要，对于标点符号妨碍的那些地方，高亮可能会失效。

当然，效率越高越好，因为这将成为移动应用程序的一部分...如果从搜索中删除 info 类需要很长时间，我将不得不从文件中删除它，因为它不是不是绝对必要的。

我从here 中发现了以下代码可能会有所帮助，它应该去除无效字符，但由于我有限的编码能力，我不确定如何将其正确地合并到自定义包含函数中。

Return Regex.Replace(strIn, "[^\w\.@-]", "")

非常感谢您的帮助。

编辑：感谢@Nick，这是首选的解决方案：

$('#himnario').children().addClass('hideMe'); // hide all hymns
//http://stackoverflow.com/questions/12152098/jquery-search-contains-without-punctuation-excluding-specific-class
// Get rid of punctuation in your search item - this only allows alphanumeric
item2 = item.toUpperCase().replace(/<(.|\n)*?>|[^a-z0-9\s]/gi, ''); 
// Loop though each song
$('#himnario').children().each(function() {
    var $this_song = $(this);
    // Examine the song title & the ordered list, but not the hidden info (first child)
    $this_song.children('.tuneName, ol').each(function() {
        // Get the html, strip the punctuation and check if it contains the item
        if ($(this).html().toUpperCase().replace(/<(.|\n)*?>|[^a-z0-9\s]/gi, '').indexOf(item2) !== -1) {
            // If item is contained, change song class
            $this_song.removeClass('hideMe').highlight(item); //original search phrase
            isHighlighted = true; //check later, for better performance
            return false;   // Prevents examination of song lines if the title contains the item
        } 
    });            
});

高亮功能：

/*
highlight v3
Highlights arbitrary terms.
<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
MIT license.
Johann Burkard
<http://johannburkard.de>
<mailto:jb@eaio.com>
*/
jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
   }
  }
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
   for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
   }
  }
  return skip;
 }
 return this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 });
};

jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.firstChild.nodeName;
  with (this.parentNode) {
   replaceChild(this.firstChild, this);
   normalize();
  }
 }).end();
};

Answer 1

为什么不直接使用 Javascript 来完成这项工作？一个简单的正则表达式应该可以解决问题：

str.replace(/[^a-z0-9\s]/gi, '')

这将采用字符串str 并删除任何不是数字或字母（字母数字）的字符。如果我是你，我不会覆盖原始 HTML（当然，除非那是重点），而是我会将 HTML 的值存储在一个字符串 str 中，然后对其执行讨厌的正则表达式那里。这样，原始 HTML 将保持完整，如果您愿意，您仍然可以使用和输出新字符串。真的不需要 jQuery，:contains 只需要slow you down。

Answer 2

如果你通过 id 直接找到一个元素，然后从那里过滤，jQuery 的工作速度最快。所以，我假设你的 HTML 是这样的：

<div id="himnario">
    <div id="1" class="song hideMe">
        <div class="info">Hidden text</div>
        <div class="tuneName">Search me!</div>
        <ol>
            <li>Verse 1</li> 
            <li>Verse 2</li>
        </ol>
    </div>
    <div id="2" class="song hideMe">
        ...
    </div>
</div>

要最有效地查找歌曲，请执行以下操作：

$('#himnario').children()...

注意：children() 比find() 好得多，因为它只搜索到一个级别的深度。如果只有儿童歌曲，则不指定 .song 会加快速度。如果是这样，你已经走得更快了。

一旦你有了孩子，你就可以使用each()，这不是绝对最快的方式，但没关系。所以这会检查每首歌曲/孩子：

$('#himnario').children().each(function(index) {...});

对于您的情况：

// Get rid of punctuation in you search item - this only allows alphanumeric
item = item.replace(/[\W]/gi, '');

// Loop though each song
$('#himnario').children().each(function() {
    var $this_song = $(this);

    // Loop through each line in this song [EDIT: this doesn't account for the title]
    $this_song.find('li').each(function() {

        // Get the html from the line, strip the punctuation and check if it contains the item
        if $(this).html().replace(/[\W]/gi, '').indexOf(item) !== -1 {
            // If item is contained, change song class
            $this_song.removeClass('hideMe');
            return false;   // Stops each_line loop once found one instance of item
        } 
    }            
});

我没有对突出显示做任何事情。我也没有对此进行测试，但是一旦发现任何小错误，它应该可以正常工作:)

编辑：根据您的“歌曲标题”字段，您可以执行以下操作：

// Get rid of punctuation in you search item - this only allows alphanumeric
item = item.replace(/[\W]/gi, '');

// Loop though each song
$('#himnario').children().each(function() {
    var $this_song = $(this);

    // Examine the song title & the ordered list, but not the hidden info (first child)
    $this_song.children().not(':first').each(function() {

        // Get the html, strip the punctuation and check if it contains the item
        if $(this).html().replace(/[\W]/gi, '').indexOf(item) !== -1 {
            // If item is contained, change song class
            $this_song.removeClass('hideMe');
            return false;   // Prevents examination of song lines if the title contains the item
        } 
    }            
});

这个版本应该比循环遍历每一行更快。另请注意，我已从 .each 调用中删除了 index 和 index2 变量，因为您不使用它们。