2

div内のhtmlを強調表示する関数を開発しています。以前にいくつかの回答を確認しましたが、私の場合の解決策は見つかりませんでした。問題は、私が持っている関数は、実際には2組のhtmlタグで同時に機能しないということです。例：

このhtmlコードを持っている：

<span>Les malalties vasculars cerebrals (MVC)
      conegudes també com a <i>feridures o ictus</i> representen la tercera causa de

そして、jqueryを使用したこの関数

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.length && pat && pat.length ? this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 }) : this;
};

jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.firstChild.nodeName;
  with (this.parentNode) {
   replaceChild(this.firstChild, this);
   normalize();
  }
 }).end();
};
  1. リストアイテム

私が検索した場合：「Les」はうまく機能します。

私が検索した場合：「feridures」もうまく機能します。

しかし、「com a feridures」を検索しても、この関数は私のテキストを強調表示しません。

これは私が私のアプリケーションを完了するために必要な唯一のものです。

4

1 に答える 1

1

問題はHTMLタグではなく、問題はありますが、2つのタグとは何の関係もありません。これは、アプリケーションがリテラルテキストを検索しているという事実です。つまり、「com a feridures」ではなく、「com a feridures」が検出されるため、一致するものはありません。

jQueryを使用して、最初にスパンからHTMLを削除すると、機能します。

$(".highlight").html( $(".highlight").text() );

例： http： //jsfiddle.net/calder12/nJ5mQ/

于 2013-03-14T19:12:50.740 に答える