Search code examples
javascripthtmlhtml-parsingdomparser

Skip adding class name to child element(s) if both parent and child element contains inline background-color

I am trying to add a random class name to elements that contains inline background color. I want to add one more condition to that. If parent and child elements both have inline background color, no need to add class name for child element. Need to skip that specific sub children. How do I skip adding class name for child element if both parent and child element contains background-color?

function modifyContent(content) {
  const doc = new DOMParser().parseFromString(content, "text/html");
  // select only elements with a style attribute:
  for (const element of doc.querySelectorAll('[style]')) {
    if (element.style.backgroundColor) {
      element.classList.add('someRandomClassName');
    }
  }
  return doc.body.innerHTML;
}

const input = `<div>
   <div style="font-size :  16px; font-family :  Arial,  Helvetica,  sans-serif; ">
      <div>
         <span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">ncern:&nbsp;</span></span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">Description </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         <span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size">ncern:&nbsp;</span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size">Description </span></span></span></span>
         </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(254, 255, 102); ">
         </span><span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(254, 255, 102); ">ncern:&nbsp;</span></span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(254, 255, 102); ">Description </span></span></span></span></span><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span><span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(204, 204, 204); ">ncern:&nbsp;</span></span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(204, 204, 204); ">Description </span></span></span></span></span><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span></span></span></span></span>
         <br>
      </div>
   </div>
   <br>
</div>`;
console.log(modifyContent(input));

Solution

  • I believe this selector should work [style*='background-color']:not([style*='background-color'] [style*='background-color'])

    
var modifyContent = function(content) {
  var doc = new DOMParser().parseFromString(content, "text/html");
  var items = doc.querySelectorAll("[style*='background-color']:not([style*='background-color'] [style*='background-color'])");

  for (var i = 0; i < items.length; i++) {
      items[i].classList.add("someRandomClassName");
  }

  return doc.body.innerHTML;
}

const input = `<div>
   <div style="font-size :  16px; font-family :  Arial,  Helvetica,  sans-serif; ">
      <div>
         <span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">ncern:&nbsp;</span></span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">Description </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         <span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size">ncern:&nbsp;</span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size">Description </span></span></span></span>
         </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(254, 255, 102); ">
         </span><span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(254, 255, 102); ">ncern:&nbsp;</span></span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(254, 255, 102); ">Description </span></span></span></span></span><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span><span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(204, 204, 204); ">ncern:&nbsp;</span></span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(204, 204, 204); ">Description </span></span></span></span></span><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span></span></span></span></span>
         <br>
      </div>
   </div>
   <br>
</div>`;
const result = modifyContent(input);
console.info(result);