如果父元素和子元素都包含内联背景色，则跳过向子元素添加类名答案

【问题标题】：Skip adding class name to child element(s) if both parent and child element contains inline background-color如果父元素和子元素都包含内联背景色，则跳过向子元素添加类名
【发布时间】：2022-12-14 22:38:35
【问题描述】：

我正在尝试向包含内联背景颜色的元素添加一个随机类名。我想再添加一个条件。如果父子元素都具有内联背景色，则无需为子元素添加类名。需要跳过那个特定的子孩子。如果父元素和子元素都包含背景颜色，如何跳过为子元素添加类名？

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));

【问题讨论】：

标签： javascript html html-parsing domparser

【解决方案1】：

我不是 100% 确定你在问什么，但这是我的看法。请注意有只有 1 个<span> 元素在您满足条件的示例中，如果我理解正确（条件是：self 和 parent 具有 background-color 样式属性集）。

您可以使用此选择器进行验证：doc.querySelectorAll("[style*="background-color"] > [style*="background-color"]")。

您的代码变为：

var searchItem = function(items, item) {
    for (var i = 0; i < items.length; i++) {
        if (items[i] === item)
            return true;
    }
    return false;
}

var modifyContent = function(content) {
    var doc = new DOMParser().parseFromString(content, "text/html");
    
    var items = doc.querySelectorAll("[style*="background-color"]");
    var skip = doc.querySelectorAll("[style*="background-color"] > [style*="background-color"]");
    
    for (var i = 0; i < items.length; i++) {
        if (searchItem(skip, items[i])) {//skip
            items[i].classList.add("skipped");
            console.log("skipped:");
            console.log(items[i]);
        }
        else {//add
            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>`;

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .someRandomClassName {
                border:1px solid red;
            }
            .skipped {
                border:2px solid green;
            }
        </style>
    </head>
    <body>
        <div id="result"></div>
        <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function(e){
      
        var result = modifyContent(input);
        /*
          the skipped element(s) are added a ".skipped" CSS class
          for quick visualization
        */
        document.querySelector("#result").innerHTML = result;
      });
        </script>
    </body>
</html>

带有绿色边框的跨度是被跳过的元素。

【讨论】：

是的。它适用于这个最小的 html 数据。但失败了here。我有复杂的嵌套 html 元素。还需要检查 grandParent 和 grandChildren。在上面的小提琴中，它将类名添加到第 4 个和第 1 个跨度元素。它应该只为第一个跨度元素添加。为什么要为 grandChildren 添加类名（我的意思是带有内联背景色的第 4 个跨度）？
预期结果应该是这样的 - Example Screenshot
@KaruppiahRK 对不起，我不太明白你的意思（健康）状况用于跳过一个元素。你能更清楚地重新表述吗？我不清楚你原来的帖子。你到底想达到什么目的？
你的“randomClass”的目的是什么？是为了造型吗？是否用于附加事件侦听器？还有别的吗？ :-)
randomClass 应用 CSS 过滤器的目的

【解决方案2】：

你必须做这样的事情：

hasChildrenBackgroundColor = false;
hasParentBackgroundColor = false;

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]')) {
    checkChildrenBackgroundColor(element.children);
    
    if (hasParentBackgroundColor && hasChildrenBackgroundColor) {
        hasParentBackgroundColor = false;
        hasChildrenBackgroundColor = false;
      continue;
    }
    
    hasParentBackgroundColor = false;
    hasChildrenBackgroundColor = false;

    if (element.style.backgroundColor) {
      element.classList.add('someRandomClassName');
    }
  }
  return doc.body.innerHTML;
}

function checkChildrenBackgroundColor (elements) {
  for (let element of elements) {
        checkParentBackgroundColor(element.parentNode.parentNode);
  
    if (element.style.backgroundColor) {
      hasChildrenBackgroundColor = true;
      return;
    }
  
    if (element.children && element.children.length) {
      checkChildrenBackgroundColor(element.children);
    }
  }
}

function checkParentBackgroundColor (element) {
  if (element && element.style && element.style.backgroundColor) {
        hasParentBackgroundColor = true;
    return;
  }

    if (element.parentNode) {
    checkParentBackgroundColor(element.parentNode);
  }
}

检查parentElement是否存在样式backgroundColor。如果某些元素具有 backgroundColor 类，则检查子集合。

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【解决方案3】：

如果你想跳过将随机类添加到元素，如果任何它的孩子有内联背景颜色，你可以使用递归来遍历孩子：

function modifyContent(content) {
  const doc = new DOMParser().parseFromString(content, "text/html");

  for (const element of doc.querySelectorAll("a[style]")) {
    if (element.style.backgroundColor) { // Parent has inline background color
      if (!checkChildren(element)) { // No children have it
        element.classList.add("someRandomClassName");
      }
    }
  }
}

function checkChildren(element) { // Check children recursively
  for (const child in element.children) {
    if (typeof child.style != "undefined") { // Child has property "style"
      if (child.style.backgroundColor) return true; // Child has inline background color
    }

    for (const nestedChild in child.children) { // Checking nested children
      if (checkChildren(nestedChild)) return true;
    }
  }

  return false;
}

【讨论】：

它返回TypeError: child.style is undefined
@KaruppiahRK 更新了我的答案，再试一次
它抛出 TypeError。
@KaruppiahRK 再次更新

【解决方案4】：

好的。我添加了一个条件函数来递归遍历元素的父元素。我想，这对你有帮助。

var parentHasNoBackgroundColor = function(element) {
  while (element.nodeName !== 'BODY') {
    if ((element.getAttribute('style') || '').includes('background-color'))
      return false;
    else {
      return parentHasNoBackgroundColor(element.parentElement);
    }
  }
  return true;
}

var modifyContent = function(content) {
  var doc = new DOMParser().parseFromString(content, "text/html");

  var items = doc.querySelectorAll("[style*='background-color']");

  for (var i = 0; i < items.length; i++) {
    if (parentHasNoBackgroundColor(items[i].parentElement))
      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.log(new DOMParser().parseFromString(result, "text/html"));

【讨论】：