JQuery проблема многострочного текста

Question

У меня есть div с текстом внутри:

<div>A description of dreamstill. It is a music site that is social and other stuff where you cando this and that and pretty much anything that your heart allows. This is probably as long as the description will get.</div>

Затем я извлекаю текст и прикрепляю его как атрибут data-url к изображению:

var desc = div.text();
div.replaceWith('<img class="center" src='+url+' data-desc=' + desc + ' />');

что изображение генерируется так:

<img class="center" src="http://featherfiles.aviary.com/2011-09-09/aae3b22a952841cd9c0d6a26a5867325.png" data-desc="A" description="" of="" dreamstill.="" it="" is="" a="" music="" site="" that="" social="" and="" other="" stuff="" where="" you="" cando="" this="" pretty="" much="" anything="" your="" heart="" allows.="" probably="" as="" long="" the="" will="" get.="">

Что я здесь не так делаю?

Answer 1

Проблема в том, что вы пропускаете кавычки вокруг значения в теге, но вы не можете просто добавить кавычки, потому что они все равно прервутся, если текст описания содержит кавычки.

Вместо этого попробуйте это.

var desc = div.text();
div.replaceWith(
  $('<img />', {
    "class": "center",
    "src": url,
    "data-desc": desc
  })
);

Answer 2

Другие ответы верны, потому что вы пропускаете кавычки, но следующая проблема, с которой вы столкнетесь, будет в том случае, если описание содержит цитату и нарушает HTML. Я рекомендую добавить изображение, а затем установить data-desc.

div.replaceWith(
  $('<img class="center" src="' + url + '"/>').attr('data-desc', desc)
);

Answer 3

Это заменит кавычки на символьную сущность

desc.replace(/\"/g, '"')

Результат + кодирование URL:

div.replaceWith('<img class="center" src="' + encodeURI(url) + '" data-desc="' + desc.replace(/\"/g, '&quot;') + '" />');

Пример использования jsfiddle

Answer 4

Вам не хватает кавычек. Все значения атрибутов должны быть в " кавычках

div.replaceWith('<img class="center" src='+url+' data-desc="' + desc + '" />');

и для URL до

src="'+url+'"

от w3c Значения атрибутов всегда должны быть заключены в кавычки http://www.w3schools.com/html/html_attributes.asp

живая демоверсия : http://jsfiddle.net/pzC7b/8/

Answer 5

div.replaceWith('<img class="center" src="'+url+'" data-desc="' + desc + '" />');

забыл "по обе стороны от desc