SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Remove duplicate <br /> tag from text node.

    I have a section of code that I am attempting to remove duplicate <br /> tags from. I understand that there are better ways to do this, but for the time being my only option is to do it client side with javascript/jquery (as I do not have control over the source html).

    You can view the working example here to play around with it:
    http://tinkerbin.com/qqGEqJ2D

    The text node looks like this:
    Code:
    <div class="show-tooltip-text">
    <p><sup>2</sup>lots of text 
    can be seen here.
    <br><br>another lines text
    <br><br>another lines text
    <br><br>another lines text
    <br><br>
    <br><br>
    <br><br>another lines text
    <br><br>
    <br><br>another lines text
    <br><br>another lines text
    <br><br>another lines text
    <br><br>another lines text
    <br><br>another lines text
    <br><br>another lines text
    <br><br>another lines text
    <br><br>
    <br><br>another lines text
    <br><br>another lines text
    <br><br>another lines text</p>
    </div>
    My Jquery looks like this:
    Code JavaScript:
    $(function() {
      $("br + br",$(".show-tooltip-text")).each(function(){ 
      	if($(this).prev()[0].nodeName == this.nodeName){
            	$(this).remove()
            }
      });
    });

    I realize the problem is that prev doesn't account for text as nodes. So when running prev on a single text node it only sees the <br> tags which results in it removing all but the very first <br>. My goal is to have it reduce every grouping of <br> tags down to 1 <br> tag. So I still want the spacing, I just want it to be a single space. It seems like the only way to do this might be a regex, but I'm not sure how to begin such a regex.

    Thanks for your help.
    Follow Me On Twitter: BryceRay

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This doesn't use jquery, but you can fiddle it to select only the class you want:

    Code:
    document.body.innerHTML=document.body.innerHTML.replace(/(<br>\s*){2,}/g,'<br>');

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You could just check if the next element is a br element, and if so, remove it.

    Code javascript:
    $('br').each(function () {
        if ($(this).next().is('br')) {
            $(this).next().remove();
        }
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestions, this is the ultimate solution I went with:

    Code JavaScript:
    $('.show-tooltip-text').each(function(){
    			$(this).html($(this).html().replace(/(<br>\s*){2,2}/g,'<br>'));
    	});
    Follow Me On Twitter: BryceRay

  5. #5
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bar338 View Post
    Thanks for the suggestions, this is the ultimate solution I went with:

    Code JavaScript:
    $('.show-tooltip-text').each(function(){
    			$(this).html($(this).html().replace(/(<br>\s*){2,2}/g,'<br>'));
    	});

    Turns out if you want this to work in IE and want a better all around solution you should make the search case insensitive like this:
    Code JavaScript:
    $('.show-tooltip-text').each(function(){
       $(this).html($(this).html().replace(/(<br>\s*){2,2}/gi,'<br>'));
    });
    Follow Me On Twitter: BryceRay

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bar338 View Post
    Turns out if you want this to work in IE and want a better all around solution you should make the search case insensitive like this:
    Code JavaScript:
    $('.show-tooltip-text').each(function(){
       $(this).html($(this).html().replace(/(<br>\s*){2,2}/gi,'<br>'));
    });
    Even though my suggestion from earlier looks simpler, you may find that it does the better job, as well as being easier to understand too.

    Code javascript:
    $('.show-tooltip-text br').each(function () {
        if ($(this).next().is('br')) {
            $(this).next().remove();
        }
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •