現在、html ファイル内の div 内を検索し、その中に結果が見つかった場合は hideMe クラスを削除して、見つかった賛美歌を明らかにします。検索から情報クラスを除外しながら、句読点なしで (入力と出力の両方から句読点を削除して) 賛美歌を検索できるかどうか疑問に思っています。
<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プラグインを使用しているため、これは複雑になると思います。必要に応じて、句読点が邪魔になる場所でハイライトが機能しなくなる可能性があります。
もちろん、これはモバイルアプリの一部になるため、より効率的であるほど良いです...検索から情報クラスを削除するのに時間がかかる場合は、絶対にそうではないため、ファイルから削除する必要があります必要不可欠。
ここから、無効な文字を削除するはずの次のコードを見つけましたが、コーディング能力が限られているため、それをカスタムの Contains 関数に適切に組み込む方法がわかりません。
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();
};