删除html元素中的字符串重复内容

Question

我的初始HTML如下所示：

​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="coh-container coh-container-boxed">
   <p class="coh-paragraph">Up until about five years ago, only low levels of AI or machine learning were being used for some fraud-detection tasks. And then a few early-adopter CSPs started to apply modern machine-learning tools to revenue assurance and fraud management with very positive results, which has encouraged more and more CSPs to adopt machine learning as part of business-assurance best practices.<br>
      <br>
      &nbsp;<br>
      <br>
      But what’s next for machine learning?<br>
      <br>
      <br>
      Will it become an out-of-the-box solution?<br>
      &nbsp;<br>
      Can machine-learning self-tuning outwit changes in fraudsters’ behavior?<br>
      &nbsp;<br>
      What are the myths about applying machine learning to business assurance, and what’s the reality?<br>
      &nbsp;<br>
      Can business assurance support 5G and all the new risks that come with it?<br>
      <br>
      <br>
      Watch this masterclass video from TM Forum Digital Transformation World 2020, with experts from BT, Rogers Communications, A1, and Deutsche Telekom, discussing these and other critical issues with Amdocs CVidya CTO Dr Gadi Solotorevsky.<br>
      <br>
      .zoom:hover { <br>
      transform: scale(1.02);  <br>
      }<br>
      <br>
      .zoom {<br>
      <br>
      transition: transform .2s; /* Animation */<br>
      width: 100%;<br>
      height: 100%;<br>
      margin: 0 auto;<br>
      background-color: rgba(102, 102, 102, 0.2)!important;<br>
      border-radius: 15px;<br>
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);<br>
      } <br>
      <br>
      <br>
      <br>
      .col-lg-6 {<br>
      <br>
      height:270px;<br>
      <br>
      <br>
      }<br>
      <br>
      .relatedtype {<br>
      height:30px;<br>
      font-size:large;<br>
      padding:15px 15px 0px 15px!important;<br>
      font-weight:bold;<br>
      font-size:small;<br>
      }<br>
      <br>
      <br>
      .relatedtitle {<br>
      height:100px;<br>
      font-size:large;<br>
      padding:15px 15px 0px 15px!important;<br>
      }<br>
      <br>
      .relateddesc {<br>
      height:160px;<br>
      <br>
      padding:0px 15px 5px 15px!important;<br>
      <br>
      }<br>
      <br>
      <br>
      <br>
      .linesmall {<br>
      height: 4px;<br>
      background: linear-gradient(to right,#ffa402,#ff5661,#ff279c);<br>
      width: 32px;<br>
      display: block;<br>
      padding:2px 2px 2px 15px!important; <br>
      margin-bottom:20px;<br>
      margin-left:15px;<br>
      }<br>
      <br>
      .related {<br>
      overflow: hidden;<br>
      text-align: center;<br>
      margin-top:30px!important;<br>
      margin-bottom:50px!important;<br>
      font-size:24px!important;<br>
      font-weight:bold;<br>
      line-height:1.1<br>
      <br>
      }<br>
      .related:before,<br>
      .related:after {<br>
      /*background-color: #323147;*/<br>
      background: linear-gradient(to right,#ffa402,#ff5661,#ff279c);<br>
      content: "";<br>
      display: inline-block;<br>
      height: 2px;<br>
      position: relative;<br>
      vertical-align: middle;<br>
      width: 50%;<br>
      }<br>
      .related:before {<br>
      right: 0.5em;<br>
      margin-left: -50%;<br>
      }<br>
      .related:after {<br>
      left: 0.5em;<br>
      margin-right: -50%;<br>
      }<br>
      <br>
      next steps<br>
      <br>
      <br>
      <br>
      <br>
      insight<br>
      <br>
      Executive predictions 2021<br>
      <br>
      &nbsp;<br>
      <br>
      How COVID-19, 5G, cloud and more are changing our world<br>
      <br>
      <br>
      <br>
      <br>
      <br>
      solutions<br>
      <br>
      Amdocs cVidya<br>
      <br>
      &nbsp;<br>
      <br>
      Protect your business to enable growth
   </p>
   <p class="coh-paragraph">Summary<br><br>
      <br><br>
      Amdocs cVidya CTO Gadi Solotorevsky leads a TM Forum masterclass on machine learning as part of business-assurance best practices
   </p>
   <div class="coh-row coh-row-xs coh-row-visible-xs" data-coh-row-match-heights="{&quot;xs&quot;:{&quot;target&quot;:&quot;none&quot;}}">
      <div class="coh-row-inner coh-style-center-content">
         <div class="coh-column coh-visible-xs coh-col-xs-12 coh-visible-md coh-col-md-10">
            <div class="coh-container coh-container-boxed">      </div>
         </div>
      </div>
   </div>
</div>

​

问题:在标记中存在无法显示的css，我们讨论的是超过400个页面。因此，我决定使用JS查找每个css行，并从DOM分离或替换为空字符串。

JS尝试如下所示：

​

$(document).ready(function(){
  
   var content = document.querySelector('.coh-paragraph').textContent
  .replace(".zoom:hover {", "")
  .replace("transform: scale(1.02);", "")
  .replace("}", "")
  .replace(".zoom {", "")
  .replace("transition: transform .2s; /* Animation */", "")
  .replace("width: 100%;", "")
  .replace("height: 100%;", "")
  .replace("margin: 0 auto;", "")
  .replace("background-color: rgba(102, 102, 102, 0.2)!important;", "")
  .replace("border-radius: 15px;", "")
  .replace("box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);", "")
  .replace("}", "")
   
   $('.coh-paragraph').detach()
  
   var newParagraph = document.createElement("p")
   newParagraph.classList.add("new-paragraph");
  
   newParagraph.textContent = content
  
   console.log("Text content")
   console.log(newParagraph)
  
  var pContainer = document.querySelector('.coh-container')
  // pContainer.innerHTML += newParagraph
  console.log(pContainer)
  
  $(".coh-container").append(newParagraph);
  
  

});

​

然而，这似乎并没有部分起作用，因为现在所有的b标签都被删除了，并且由于某种原因，文本被复制了。

如何以编程方式从页面中删除所有css？

Answer 1

也许您可以尝试在JS中使用regex。

这里有一个代码员：https://codepen.io/johna138/pen/jOBxBLe

const p = document.querySelector("p.coh-paragraph");

// This does not keep the <br /> tags.
p.textContent = p.textContent.replace(/.*(?<=\s)[^ ]*\s*\{[^\}]+\:[^\}]+\}/gm, "");

// This keeps all the <br /> tags
p.innerHTML = p.innerHTML.replace(/.*(?<=\s)[^ ]*\s*\{[^\}]+\:[^\}]+\}/gm, "");