4 Replies - 315 Views - Last Post: 26 May 2017 - 12:46 PM

#1 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Get HTML without any attributes or classes

Posted 26 May 2017 - 06:32 AM

I am trying to get the HTML markup found in a div element, but I want to omit everything but the tag name and replace the any div tag names with row. So for example, if I have the following markup in my div:
<div class="active">
    <button style="min-height: 3em;">Button1</button>
    <button style="min-height: 3em;">Button2</button>
    <button style="min-height: 3em;">Button3</button>
</div>
<div>
    <button style="min-height: 3em;">Button4</button>
    <button style="min-height: 3em;">Button5</button>
</div>


I would only want to return the following:
<row>
    <button>Button1</button>
    <button>Button2</button>
    <button>Button3</button>
</row>
<row>
    <button>Button4</button>
    <button>Button5</button>
</row>


I've tried to get the HTML and then using the replace method like this:
var markup = $('div:first').html();
markup = markup.replace('div', 'row');
markup = markup.replace(/class=".*"/g, '');
markup = markup.replace(/style=".*"/g, '');

$('#txtMarkup').val(markup)


but it never gives me the desired behavior. Using the HTML example from above, this is what gets returned using the jQuery that I've tried:
<row >Button</button></div>


Is This A Good Question/Topic? 0
  • +

Replies To: Get HTML without any attributes or classes

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,074
  • Joined: 08-June 10

Re: Get HTML without any attributes or classes

Posted 26 May 2017 - 06:34 AM

I'd use XSLT for that.

This post has been edited by Dormilich: 26 May 2017 - 06:35 AM

Was This Post Helpful? 0
  • +
  • -

#3 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Re: Get HTML without any attributes or classes

Posted 26 May 2017 - 08:10 AM

Ultimately what I wound up doing was iterating through each <div> element, creating the parent node, and then using an inner loop to iterate through each <button> element, creating the child node. Here was my final jQuery:
var markup = '';
var divs = $('div:first').find('div');
$.each(divs, function( index, value ) {
    markup += '\n  <row>';
    var buttons = $(this).find('button');
    $.each(buttons, function() {
        markup += '\n    <button>' + $(this).text() + '</button>';
    });
    markup += '\n  </row>';
});
markup += '\n</pos>';
$('#txtMarkup').val(markup)

Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5078
  • View blog
  • Posts: 13,706
  • Joined: 18-April 07

Re: Get HTML without any attributes or classes

Posted 26 May 2017 - 08:27 AM

Another approach that would have worked...

    // Select your divs
    var divs = $("div");

    // Loop through each div
    $.each(divs, function(i, d) {
      // Get the buttons
      var buttons = $(d).find("button");
      
      // Create row and add buttons to it
      var r = $('<row/>');
      r.append(buttons);
      
      // Remove original div
      d.remove();
      
      // prepend, append insert or wherever you want it
      r.prependTo(document.body);
    }) ;




Might be a bit nicer than building by stringing things together. That method won't scale very well if you later decide to change some attributes or values. :)
Was This Post Helpful? 0
  • +
  • -

#5 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1842
  • View blog
  • Posts: 5,793
  • Joined: 15-January 14

Re: Get HTML without any attributes or classes

Posted 26 May 2017 - 12:46 PM

I think your original regular expression would have worked if you had made it ungreedy, but it was trying to match as much as possible. So it matched the first double quote with the last double quote, and removed everything between them. It should have matched the first with the next, which is an ungreedy match. Your regular expression should have looked for a double quote, then any characters except another double quote, then a double quote. That would have matched the first and next quotes and removed only that.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1