Question

I am looking to take a <div> and filter the contents inter a certain format, similar to BBCode. This is the format for each instance.

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

I wish to filter each occurrence of several strings to format the code like this:

[quote=Username,http://POSTURL]QUOTETEXT[/quote%5D

I have tried to get this using regexp in jQuery, like so:

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

And so on. However, the .replace functions fail after the first replace string; the following .replace functions fail regardless of content. This also fails.

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

So the code becomes [tag> instead of [tag].

For the POSTURL, I am using

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

Which seems to work well enough until I try to replace with it; I get the same problem of it just not working.

Why does it not work after the first replace function? What is the correct syntax or how would you complete my task? What should I do?

Answer 1

I’m not sure how you are trying to use that code… there is no replace method in jQuery.

You can’t replace parts of HTML tags and put the code back in the elements, as partially replaced tags is not valid HTML code. Get the code, make all replacements, then put the code back.

Loop through the elements, and use pattern matching in the regular expression to get the parts of the code that you want:

$("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]'
    )
  );
});

Alternatively, use jQuery to locate the blockquote elements, extract the data from them, and create new content. This is more resilient against browser differences and variations in the markup:

$("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]";
});