JavaScript - jQuery - заменяет каждое вхождение нескольких строк в одном элементе

Question

Я хочу взять <div> и отфильтровать содержимое в определенном формате, похожем на BBCode. Это формат для каждого экземпляра.

<blockquote><dl><dt>Username</dt><dd><a class="viewpostbutton" href="http://POSTURL"><img src="http://IMAGEURL" alt="View Original Post" id="vieworiginalbutton"></a></dd></dl><div>QUOTETEXT</div></blockquote>
<blockquote><dl><dt>Username</dt><dd><a class="viewpostbutton" href="http://POSTURL"><img src="http://IMAGEURL" alt="View Original Post" id="vieworiginalbutton"></a></dd></dl><div>QUOTETEXT</div></blockquote>
<blockquote><dl><dt>Username</dt><dd><a class="viewpostbutton" href="http://POSTURL"><img src="http://IMAGEURL" alt="View Original Post" id="vieworiginalbutton"></a></dd></dl><div>QUOTETEXT</div></blockquote>

Я хочу отфильтровать каждое вхождение нескольких строк для форматирования кода следующим образом:

[цитата = Имя пользователя http://POSTURL]QUOTETEXT[/quote]

Я пытался получить это с помощью regexp в jQuery, вот так:

$("selector").replace(/<blockquote><dl><dt>/g,"[quote=")
$("selector").replace(/<\/dt><dd>/g,",")

И так далее. Однако функции .replace не работают после первой строки замены; Следующие функции .replace не работают независимо от содержимого. Это также не помогает.

$("selector").replace(/</g,"[")
$("selector").replace(/>/g,"]")

Таким образом, код становится [tag> вместо [tag].

Для POSTURL я использую

$("selector").each(function() {
var printpost = $(this).find('a.viewpostbutton').attr('href');
});

Что, кажется, работает достаточно хорошо, пока я не попытаюсь заменить его; У меня та же проблема, просто не работает.

Почему он не работает после первой замены функции? Какой правильный синтаксис или как бы вы выполнили мою задачу? Что мне делать?

Answer 1

Я не уверен, как вы пытаетесь использовать этот код ... в jQuery нет метода replace.

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

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

$("selector").each(function(){
  $(this).html(
    $(this).html().replace(
      /<blockquote><dl><dt>(.*?)<\/dt><dd><a class="viewpostbutton" href="(.*?)"><img src="http://IMAGEURL" alt="View Original Post" id="vieworiginalbutton"><\/a><\/dd><\/dl><div>(.*?)<\/div><\/blockquote>/g,
      '[quote=$1,$2]$3[/quote]'
    )
  );
});

Либо используйте jQuery, чтобы найти элементы blockquote, извлечь из них данные и создать новый контент. Это более устойчиво к различиям в браузере и различиям в разметке:

$("selector blockquote").replaceWith(function(){
  var text = $('dt', this).text();
  var href = $('a', this).attr("href");
  var desc = $('div', this).text();
  return "[quote="+text+","+href+"]"+desc+"[/quote]";
});

Answer 2

Возможно, вам следует использовать .replaceWith () или .replaceAll ()?

http://api.jquery.com/replaceAll/

Я бы использовал эту последнюю функцию .each (), где вы строите строку URL итакже создайте оставшуюся часть текста

[quote=Username,http://POSTURL]QUOTETEXT[/quote]

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

Answer 3

Полагаю, вам не следует использовать replace метод элемента JQ.Попробуйте что-то вроде этого:

$(selector).each(function(){
  var str = $(this).html();
  str = processString(str);
  $(this).html(str);
});

И сделайте замену в processString().