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; }

这将采用变量“caption”并将其分成两个跨度，将它们附加到图像下方。

点击此处的示例：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);

替换img title标签内的文本以创建带有标题 - 副标题的图像标题

4 个答案: