J'ai une chaîne: <li>&File</li>. Ce que je voudrais faire, c'est analyser la chaîne à l'intérieur de l'élément li pour trouver l'emplacement de l'esperluette. Une fois trouvé, je voudrais encapsuler le caractère suivant dans un span.

La logique derrière cela est relativement simple. Obtenez la position de chaîne de &, supprimez-la, puis encapsulez le caractère suivant (c'est-à-dire position de chaîne + 1) dans un span.

Quelqu'un pourrait-il suggérer une méthode appropriée dans jQuery pour encapsuler un seul caractère d'une chaîne? Je sais qu'il est possible d'envelopper un bloc de HTML, mais peut-on travailler sur des chaînes comme celle-ci, ou serait-il préférable de créer une fonction personnalisée?

Je dois mentionner que la position de & ne sera pas toujours au début de la chaîne non plus. Je pensais utiliser des expressions régulières pour trouver sa position, car je veux seulement analyser la première occurrence d'une esperluette dans la chaîne, laissant ainsi les occurrences ultérieures intactes.

L'esperluette n'est pas une entité HTML - c'est simplement & (et non &amp;).

Toute aide et avis reçus avec gratitude ...

1
BenM 14 nov. 2011 à 22:25

6 réponses

Meilleure réponse

Essayez de suivre:

$(function(){
  $('ul>li:contains(&)').each(function(){
    var text = $(this).text();
    text = text.replace(/^&(\w){1}/, "<span>$1</span>");
    $(this).html(text);
  });
});

Vous pouvez voir un exemple ici.

1
ValeriiVasin 14 nov. 2011 à 18:40

Comme il s'agit d'un seul caractère, vous pouvez simplement utiliser .replace; pas besoin de fonctions spéciales jQuery: http://jsfiddle.net/qr3pe/1/.

$("li").each(function() {
    var html = $(this).html(),     // this element's html
        regexp = /&amp;(.)/,       // regexp (.html() returns &amp; even
                                   // if the source is &). `()` to capture.
        match = regexp.exec(html); // get the captured character

    if(!match) return; // no match; abort

    var replaced = html.replace(regexp,
                                "<span>" + match[1] + "</span>");

    $(this).html(replaced); // replace the html
});
2
pimvdb 14 nov. 2011 à 18:40

Si j'ai interprété correctement votre problème, cela devrait fonctionner. (JsFiddle)

$(document).ready(function() {  
   var m = $('#test').html();  
   var n = m.indexOf('&amp;')  //Of course, you could simply use '&' here, everything else being same.
   var spanLetter = m.substr(n+5, 1);  
   /* Note that '&' is represent as &amp; in HTML and therefore, the logical, n+1 as start param will give 'a' as the result for spanLetter */
   var restString = m.substr(n+6, n.length);  
   alert(n);  
   alert('<span>' + spanLetter + '<span>');  
   alert(restString);  
});  
1
check123 14 nov. 2011 à 18:46

Que dis-tu de ça?

function() {
        $("li").each(
            function() {
                $(this).html($(this).text().replace(/&(.)/, '<span>$1</span>'));
            }
        );
    }
1
James Jithin 14 nov. 2011 à 18:45
var string = '<li>&File</li>';
var el = $(string);
el.html(el.text().replace(/&(.?)/, "<span>$1</span>"));
$(document.body).append(el);

http://jsfiddle.net/8whDz/

1
Alex Wayne 14 nov. 2011 à 18:31
var text = $("li").text();
var location = text.indexOf("&");
if (location >= 0) { //if there is no &, location will equal -1
  var character = "<span>"+text.slice(location+1,location+2)+"</span>";
  text = text.slice(0,location)+character+text.slice(location+2);
}

Si vous le vouliez, vous pourriez probablement tout ranger sur une seule ligne, mais je l'ai divisé pour le rendre plus facile à lire.

http://jsfiddle.net/q7GA5/1/

1
switz 14 nov. 2011 à 18:36