CODEWITHSUNDEEP
jqueryreplace
Makaze
Makaze

Reputation: 1086

JavaScript - jQuery - Replace every occurrence of several strings in the same element

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]

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?

Upvotes: 0

Views: 1387

Answers (3)

Guffa
Guffa

Reputation: 700342

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

Upvotes: 2

GTC
GTC

Reputation: 1

Perhaps you should be using .replaceWith() or .replaceAll()?

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

I would use that last .each() function where you build the url string and also build the rest of the 

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

text, and then, before finishing the .each, use .replaceAll to replace the selected node's content with the final content.

Upvotes: 0

AlexZam
AlexZam

Reputation: 1196

I suppose you should not use replace method of JQ element. Try something like this:

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

And make your replacements in processString().

Upvotes: 0

Related Questions