Y a-t-il une meilleure façon d'insérer mon élément dans le texte en utilisant Jquery?

Question

J'ai écrit un certain jquery pour résoudre ce problème. Bien que cela fonctionne, je ne peux pas m'empêcher de penser que ma jquery est terrible & espérait que quelqu'un peut me dire qu'il me manque quelque chose et corriger mon code pour utiliser quelque chose de plus impressionnant. En particulier la concat de cordes que je fais (commenté comme regardant «vomir») est boiteuse. Quelqu'un peut-il le dénoncer?

Le problème est de prendre le code HTML ci-dessous et de remplacer le texte entre accolades {glückliche} avec l'ancre de légèrement plus bas et aussi remplacer le texte de l'ancre par le mot dans les accolades. Cela doit être fait de manière générique (c'est-à-dire non codé en dur) car ils sont nombreux.

J'ai trouvé que l'insertion d'une ancre dans le texte de cette façon particulière, n'était pas vraiment pris en compte dans les méthodes jquery - j'espère que je me trompe.

HTML donné

<tr> 
    <td class="german">bin ich eine {glückliche} Fliege</td> 
    <td class="english">am I a happy fly</td> 
    <td> 
     <div class="lessonLink"> 
      <a href="http://www.german.org/happy" title="happy">&gt;&gt;</a> 
     </div> 
    </td> 
</tr> 

HTML souhaité

<tr> 
    <td class="german">bin ich eine <a href="http://www.german.org/happy" title="happy">glückliche</a> Fliege</td> 
    <td class="english">am I a happy fly</td> 
    <td> 
     <div class="lessonLink"> 
      <a href="http://www.german.org/happy" title="happy">&gt;&gt;</a> 
     </div> 
    </td> 
</tr> 

Le jquery

$(function() { 
    $('td.german').each(function() { 

     var sentence = $(this).text(); 

     //get the squigglied text 
     var startBrace = sentence.indexOf('{'); 
     var endBrace = sentence.indexOf('}'); 
     if (startBrace === -1 || endBrace === -1) return; 
     var toReplace = sentence.slice(startBrace, endBrace+1); 

     // find the anchor and replace it's text with squigglied 
     var $newAnchor = $(this).siblings().find('a').first().clone(); 
     $newAnchor.text(toReplace.slice(1, toReplace.length-1)); 

     //take the new anchor and insert it into the main sentence 
     // can I get full-string from DOM object? string concat looks vomit 
     var stringToInsert = '<a href="' + $newAnchor[0].href + '" ' + 
          'title="' + $newAnchor[0].title + '" >' + 
           $newAnchor[0].text + '</a>'; 

     var newSentence = sentence.replace(toReplace, stringToInsert); 
     $(this).html(newSentence); 
    }); 
}); 

Answer 1

Que diriez-vous juste en remplaçant n'importe quoi dans les accolades par un span, puis en définissant le html sur le texte remplacé et en copiant simplement le lien existant dans la travée? Je pense que vous aurez besoin de citer les accolades car ils sont spéciaux dans une expression régulière - je pourrais me tromper sur ce, cependant, pour le javascript. Si oui, faites le moi savoir et je mettrai à jour. Notez l'utilisation de closest et find avec first pour obtenir le premier lien dans la même ligne que l'élément de table en cours. Si votre texte de lien incluait déjà le mot, ce serait beaucoup plus simple.

$(function() { 
    $('td.german').each(function() { 
     var link = $(this).closest('tr').find('a:first').clone(); 
     var sentence = $(this).text().replace(re,'<span></span>'); 
     $(this).html(sentence).find('span').append(link); 
    }); 
});