jquery: Suchen Sie eine Zeichenfolge und umhüllen Sie sie in einem <a> Tag?

Question

Ich habe diese bekam:

<div class="" id="fancy_hover"> 
    <a href="home.html" id="start_writer"></a> 
    <div> 
     <p class="hidden" style="display: block;">click here to see this event with all the bells and whistles</p> 
    </div> 
</div> 

Ich brauche ein Äquivalent .find() aber für die Zeichenfolge "click here" anstelle eines Knotens zu tun, ich brauche sie dann in einem <a> Tag zu wickeln.

Was ist der beste Ansatz mit Jquery?

Answer 1

Verwendung :contains Filterselektor:

$('p.hidden:contains("click here")') 

Um es in Verbindung zu wickeln:

$('p.hidden:contains("click here")').html() 
.replace('click here', '<a href="url">click here</a>'); 

gesamten Text in Verbindung zu wickeln:

$('p.hidden:contains("click here")') 
.html('<a href="url">' + $('p.hidden:contains("click here")').text() + '<a>'); 

Mehr Info:

• http://api.jquery.com/contains-selector/

Answer 2

Sie HTML-String nicht Hacking verwenden. Stellen Sie sich vor, was passieren würde, wenn Sie versuchen würden, über <span title="blah click here blah">...</span> durch ein <a> Tag zu ersetzen ... massiv gebrochen Markup. Und das ist nur der Anfang der Probleme.

Stattdessen iterieren Sie über die Textknoten in dem Teil des Dokuments, das Sie untersuchen möchten, suchen nach Textübereinstimmungen und fügen einen neuen Link mithilfe von DOM-style-Methoden ein.

jQuery hilft Ihnen hier nicht wirklich, da es keine Funktionalität für die Verarbeitung von Textknoten hat. Verwenden Sie stattdessen so etwas wie die findText() Funktion von this question und verwenden splitText den Textknoten aufzuspalten:

findText($('#fancy_hover')[0], /\bClick here\b/gi, function(node, match) { 
    node.splitText(match.index+match[0].length); 
    var link= document.createElement('a'); 
    link.href= 'http://www.example.com/'; 
    link.appendChild(node.splitText(match.index)); 
    node.parentNode.insertBefore(link, node.nextSibling); 
});