替換img標題標籤中的文本以創建帶標題副標題的圖像標題

Question

我正在使用NIVO滑塊javascript，並且希望爲我的圖像創建標題，該標題在正常文本中以粗體和小標題顯示標題。 我想通過搜索一個雙冒號（或類似的）並用span標記替換該文本之後的所有內容來將文本拆分爲兩個單獨的元素。

這可以在jQuery中完成嗎？

Answer 1

爲了替換，你根本不需要jQuery。鑑於文本字符串：

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

...您可以使用replace用正則表達式，像這樣：

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

給定一個字符串，一個已知的分隔符，你可以去做到這一點通過陣列：

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

你可以做這樣的事情：

由於HTML這樣的：

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

而且這個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>"); 

而這個CSS：

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

.image { float:left; } 

這將變量 「標題」，它分成兩個跨越，將它們附加在圖像下方。

退房這裏的例子：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);