ersetzen Sie Text innerhalb img title Tag, um eine Bildunterschrift mit einer Überschrift-Unterüberschrift zu erstellen

Question

Ich benutze den NIVO Slider Javascript und möchte eine Beschriftung für meine Bilder, die eine Überschrift in Fettdruck und Untertitel in normalen Text hat. Ich möchte den Text in zwei separate Elemente teilen, indem ich nach einem doppelten Doppelpunkt (oder ähnlichem) suche und alles nach diesem Text durch ein span-Tag ersetze.

Kann dies in jquery erreicht werden?

Answer 1

Für die Ersetzung brauchen Sie jQuery überhaupt nicht. Bei einer Textzeichenfolge:

var mytext = "This is line one::this is line two"; 

... Sie replace mit einem regulären Ausdruck, wie diese verwenden:

var newtext = mytext.replace(/^(.*)::(.*)$/i,'$1<span>$2</span>'); 

einen String mit einem einzigen bekannten Trennzeichen gegeben, können Sie es tun, indem Sie durch eine Anordnung:

var mytext = "This is line one|This is line two"; 
var newtext = mytext.split('|'); // break into array 
newtext = newtext[0] + '<span>' + newtext[1] + '</span>'; // back to string 

Answer 2

var s = str.split(','); 
// s[0] first line 
// s[1] second line 

Answer 3

Sie so etwas tun könnte:

Gegeben HTML wie folgt aus:

<div class="image"> 
    <img class="image" src="http://farm4.static.flickr.com/3306/3498395482_c48e313ed9_s.jpg" /> 
</div> 

Und das JavaScript:

var caption = "Flamenco Beach::Wish I was there!"; 
var captionElements = caption.split("::"); 
$("div.image").append(
    "<span class='header'>" + captionElements[0] + "</span>" + 
    "<span class='subheader'>" + captionElements[1] + "</span>"); 

Und das CSS:

.header { 
    font-weight:bold; 
    float:left; 
    clear:left; 
} 
.subheader { 
    float:left; 
    clear:left; 
} 

.image { float:left; } 

Dies wird die Variable "caption" nehmen und es in zwei brechen spannt und fügt sie unter dem Bild an.

Schauen Sie sich das Beispiel hier: http://jsfiddle.net/andrewwhitaker/DXtzP/

Answer 4

http://jsfiddle.net/jruddell/Mz3sE/

var text = $('.title').html().split('::'), 
    newText = text[0] + '<b>' + text[1] + '</b>'; 

$('.title').html(newText);