замените текст внутри тега img title для создания заголовка изображения с заголовком-подзаголовком

Question

Я использую javascript слайдера NIVO и хочу создать подпись для моих изображений, которая имеет жирный заголовок и подзаголовок в обычном тексте.Я хотел бы разбить текст на два отдельных элемента путем поиска двойного двоеточия (или аналогичного) и замены всего текста после этого тега 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

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

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

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

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

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