Markieren Sie Text aus verschachtelten HTML?

Question

Ich möchte markieren Text von Jquery, aber ich kann es nicht mehr herausfinden. Eigentlich habe ich HTML-Element von API, wenn ich im Eingabefeld suchen. Aber es ist Rückkehr mit HTML-Tag als Antwort enthalten, so dass ich nicht hightlight html tag will. Ich möchte nur den Text von dieser API-Antwort hervorheben. Bitte schauen Sie sich unten an, ich möchte nur @dd von a tag nur hervorheben.

var fromAPI = '<p><span data-email="dd@gmail.com" data-id="24" data-label="@dd" class="mention"><a>@dd</a></span> </p>'; 
 
var search = "@dd"; 
 
var final = hl(fromAPI); 
 
function hl(p) { 
 
    if(/<[a-z][\s\S]*>/i.test(p)) { 
 
    p = $(p).attr('id','ddd'); 
 
    p = $(p).html($(p)[0].outerHTML); 
 
    hl(p); 
 
    } else { 
 
    var pattern = new RegExp("("+search+")","gi"); 
 
    p = $(p).html().replace(pattern, "<mark>$1</mark>"); 
 
    $(p).html($(p)[0].outerHTML); 
 
    } 
 
    return p; 
 
} 
 
console.log($(final).html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

tatsächliche Ergebnis:

<p id="ddd"><span data-email="dd@gmail.com" data-id="24" data-label="@dd" class="mention"><a>@dd</a></span> </p>

Erwartetes Ergebnis:

<p id="ddd"><span data-email="dd@gmail.com" data-id="24" data-label="@dd" class="mention"><a><mark>@dd</mark></a></span> </p>

Answer 1

Ihr Code funktioniert auf den meisten Teil s, Sie haben gerade einen Fehler gemacht, indem Sie die Funktion h1 rekursiv aufgerufen haben. Das Problem ist der folgende Code:

var final = hl(fromAPI); 
hl(p); 

Du final als die Rückkehr der Funktion Einstellung h1 aber diese Funktion nennt sich wieder, den Rückruf an die Variable zu verlieren.

kopierte ich Ihren Code zu einem JSFiddle und änderte es so u kann es versuchen, dich selbst: https://jsfiddle.net/qg6ffpLg/

Ich ersetzen h1(p); mit dem genauen Code in Ihrer else-Anweisung (nur ein Beispiel, Ihnen zu zeigen, dass Ihr Code funktioniert mit Ausnahme des Teils, wo u die Funktion zweimal aufrufen.

Answer 2

ich Lösung von wie unten Temp-ID in jedem Kind-Element geben. Derzeit wird diese meine lösen Problem.Wenn es eine bessere Lösung, mir bitte teilen !!

$(document).ready(function(){ 
 
    var fromAPI = '<p><span data-email="dd@gmail.com" data-id="24" data-label="@dd" class="mention"><a>@dd</a></span> </p>'; 
 
    var search = "@dd"; 
 
    var last = highlight.init(fromAPI,search); 
 
    console.log(last); 
 
}); 
 
    //highlight text object 
 
    var highlight = { 
 
     _id : 'highlight_search_result_history-', 
 
     childNode : 0, 
 
     search : '', 
 
     init : function(d,sKey) { 
 
     $("<div id='"+this._id+"'>").html(d).appendTo("body"); 
 
     highlight.search = sKey; 
 
     this.result('#'+this._id); 
 
     return this.finalize(); 
 
     }, 
 
     result : function(p) { 
 
      var id = this._id + (this.childNode++); 
 
      var p = $(p).children(); 
 
      $(p).attr('id',id); 
 
      if(/<[a-z][\s\S]*>/i.test($(p).html())) { 
 
      this.result('#'+id); 
 
      } else { 
 
      var pattern = new RegExp("("+highlight.search+")","gi"); 
 
      var highlightText = $(p).text().replace(pattern, "<mark>$1</mark>"); 
 
      $(p).html(highlightText); 
 
      } 
 
     }, 
 
     finalize : function() { 
 
     //remove temp id 
 
     for(var j = 0;j <= this.childNode;j++) { 
 
      $("#"+this._id+j).removeAttr("id"); 
 
     } 
 
     var highlightText = $("#"+this._id).html(); 
 
     //delete temp id 
 
     $("#"+this._id).remove(); 
 
     return highlightText; 
 
     } 
 
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>