Wie HTML-Tags vor und nach bestimmten Zeichenfolge mit Jquery

Question

Ich habe folgende HTML hinzuzufügen:

<h5 class="pi-accordion-title"> 
    <a href="#" class="z"> 
     <span class="pi-accordion-toggle"></span> 
      My Link (Keyword) 
    </a> 
</h5> 

, die Teil eines Akkordeons Link ist. Was ich versuche zu tun, ist zu öffnen Span-Tag vor dem (Stichwort) und schließen Sie es danach.

ich mit dem folgende JAVASCRIPT versuchen:

<script> 
    $("(Keyword)").before("<span class='orange'>"); 
    $("(Keyword)").after("</span>");   
</script> 

aber es funktioniert nicht ... Konsolenprotokoll zeigt die folgenden Fehler: Syntaxfehler, unerkannt Ausdruck: (Keyword)

Answer 1

$('.pi-accordion-title').each(function() { 
    this.innerHTML = this.innerHTML.replace(/(\(Keyword\))/, '<span class="orange">$1</span>'); 
}); 

Answer 2

Sie können nicht Wählen Sie einen solchen Text mit jQuery. Hier ist eine sehr einfache Möglichkeit, die does not even need jQuery zu tun.

Der Nachteil dieses Ansatzes besteht darin, dass der gesamte Inhalt des Containers neu geschrieben wird. Wenn Sie also ein Ereignis an einige untergeordnete Elemente des Containers anhängen möchten, müssen Sie dies nach dem Einfügen der Spannen tun. Daher würde ich empfehlen, einen Behälter so klein wie möglich zu wählen.

var toReplace = '(Schlüsselwort)'; var containers = document.getElementsByClassName ("pi-accordion-title"); Array.prototype.forEach.call (Container, Funktion (Container)) { container.innerHTML = container.innerHTML.replace (toReplace, '$ &'); });

.pi-accordion-title a span { 
    color:red; 
} 

<h5 class="pi-accordion-title"> 
    <a href="#" class="z"> 
     <span class="pi-accordion-toggle"></span> 
      My Link (Keyword) 
    </a> 
</h5> 

EDIT

Wenn Sie die oben genannten Element überschreiben Nachteil vermeiden möchten, können Sie die ":contains" jQuery-Selektor nutzen. Wenn Sie jQuery verwenden, denke ich, dass es die beste/sicherste Methode ist, da Sie nur die übergeordneten Elemente neu schreiben.

var toReplace = '(Keyword)'; 
$(":contains(" + toReplace + ")").each(function(){ 
    this.innerHTML = this.innerHTML.replace(toReplace, '<span>$&</span>'); 
}); 

.pi-accordion-title a span { 
    color:red; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h5 class="pi-accordion-title"> 
    <a href="#" class="z"> 
     <span class="pi-accordion-toggle"></span> 
      My Link (Keyword) 
    </a> 
</h5> 

Answer 3

ich mit jquery.Grab Namen der Klasse versucht haben und den Text oder HTML bekommen, dann können Sie durch .replace mit find Wort ersetzen

var title = $(".pi-accordion-title"); 
var text = title.html(); 
title.html(text.replace(/(\(Keyword\))/g,"<span class='orange'>$&</span>"));