2

I have a tool that is used for cleaning up crappy HTML in order to make sense of the underlying structure. Having stripped class, style attributes and various Angular attributes, often the resulting markup is a series of nested <div> or <span> elements that have no attributes. What I would like to do is provide option to do a second pass where a <div> or <span> with no attributes can be removed, to flatten the structure more.

Is there a way in JavaScript to confirm that an HTML element has no attributes of any kind?

And if that is possible, how might I approach this stripping of an element?

For example, assuming I have this:

<div>
 <div>
  <div id="blah">
   <div>
    <div>
     <span dir="auto">
      <span>Joe Bloggs</span>
     </span>
    </div>
   </div>
  </div>
 </div>
</div>

That should end up as:

  <div id="blah">
     <span dir="auto">
      Joe Bloggs
     </span>
  </div>

Which I would then format to:

<div id="blah">
 <span dir="auto">
  Joe Bloggs
 </span>
</div>

So I'd need a function that can walk the DOM and remove a div (or span) that has no attributes while leaving the inner contents intact (unless of course any of those inner elements can also be stripped for same reason).

Any pointers before I go ahead and construct a shoddy (but working) script would be appreciated!

Ian Lloyd
  • 31
  • 1
  • 6
  • @CBroe I don't think it's the best idea to [parse `outerHTML` with regex](https://stackoverflow.com/q/1732348/8376184), especially if you already have it parsed (the DOM). – FZs Mar 30 '21 at 10:35

3 Answers3

1

The attributes property will tell you how many attributes an element has.

const countAttributes = element => console.log({
  count: element.attributes.length,
  list: [...element.attributes].map(attribute => attribute.name)
});

const divs = document.querySelectorAll('div');
divs.forEach(countAttributes);
<div></div>

<div class="one attribute"></div>

<div class="two attributes" id="second attribute"></div>

Do note that an element without attributes might still be used for something (e.g. a stylesheet might reference it in relation to other elements).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks Quentin. The ability to remove layers of markup is only for purposes of simplifying structure where needed (a case of not being able to see wood for the trees). So we can bascially ignore the CSS implications for how I am using this :) – Ian Lloyd Mar 31 '21 at 15:57
0

Updated Code

Here you go.

document.querySelectorAll("div").forEach((ele) => {
  if (ele.attributes.length === 0) {
    var fragment = document.createDocumentFragment();
    while (ele.firstChild) {
      fragment.appendChild(ele.firstChild);
    }
    ele.parentNode.replaceChild(fragment, ele);
  }
});
<div>
 <div>
  <div id="blah">
   <div>
    <div>
     <span dir="auto">
      <span>Joe Bloggs</span>
     </span>
    </div>
   </div>
  </div>
 </div>
</div>
So final output would be 
<div id="blah">
  <span dir="auto">
    <span>Joe Bloggs</span>
  </span>
</div>
TechySharnav
  • 4,869
  • 2
  • 11
  • 29
0

Here's how I did it.

I created a demo element, to get the elements, then I checked the number of elements, I checked if the element should be stripped.

I replaced the element with its children, and if it didn't have any, I used its text

function strip(startElement, toStrip) {
  const test = document.createElement('div');
  test.innerHTML = startElement.outerHTML;
  
  [...test.querySelectorAll('*')].forEach(elem => {
    if (!elem.attributes.length && toStrip.includes(elem.tagName.toLowerCase())) {
      if (elem.children.length) elem.replaceWith(...elem.children);
      else elem.replaceWith(elem.innerText);
    } ;
  });
  
  return test.innerHTML;
}

console.log(strip(document.querySelector('div'), ['span', 'div']));
<div>
 <div>
  <div id="blah">
   <div>
    <div>
     <span dir="auto">
      <span>Joe Bloggs</span>
     </span>
    </div>
   </div>
  </div>
 </div>
</div>
a.mola
  • 3,883
  • 7
  • 23