1

目前，我在 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 插件来突出显示结果，所以我想这会使事情复杂化。如果需要，对于标点符号妨碍的那些地方，突出显示可能会失效。

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

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

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();
};
4

2 回答 2

1

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

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

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

于 2012-08-28T02:56:32.357 回答
1

如果你直接通过它的 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
        } 
    }            
});

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

于 2012-08-28T04:10:51.657 回答