替换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);