如何使用正则表达式从内容中获取不同的html标记？

时间：2020-01-13 作者：Ashur

我试图从一篇文章中获得不同的html标记，并将它们显示为嵌套的手风琴。我已经很有成就了。我唯一的问题是。当我试图显示span内的所有p标记内容时，它只显示每个嵌套菜单内容的第一段。

<div>
<h2 style="text-align: center">History</h2>
 <?php
$sampleH = \'<b class="1">2020</b>

<p class="1"><strong class="1">Jan 10</strong> This is first paragraph.</p>
<p class="2"><strong class="2">Feb 2</strong> this is second paragraph</p>
<p class="3"><strong class="3">Mar 23</strong> this is third paragraph</p>

<b class="2">2019</b>

<p class="4"><strong class="4">Jan 20</strong>This is fourth paragraph.</p>
<p class="5"><strong class="5">Feb 30</strong>this is fifth paragraph</p>
<p class="6"><strong class="6">Mar 2</strong>this is sixth paragraph</p>\';
$classesH =  100;




 for($w = 1; $w <= $classesH; $w++) {
preg_match(\'/<b class="\'.$w.\'">(.*?)<\\/b>/s\', $sampleH, $match); 
if($match) {
?>
<button class="accordion">
<?php echo $match[1]; 
?>
</button>
<div class="panel">
<?php
for($y = 1; $y <= $classesH; $y++) {
preg_match(\'/<strong class="\'.$y.\'">(.*?)<\\/strong>/s\', $sampleH, $match1); 
if($match1) { ?>
<p class="accordion1">
<?php 
echo $match1[1];  
 ?>   
</p>
<?php
for($z = 1; $z <= count($match); $z++) {
preg_match(\'/<p class="\'.$z.\'">(.*?)<\\/p>/s\', $sampleH, $match2); 
if($match2) {  
?>           
<span class="panel1">
<?php echo $match2[1];
  ?>
</span>
<?php }}}} ?>
</div>
<?php }}  ?>
</div>




<!-----------------------  Scripts -------------------------->



<script>
var acc = document.getElementsByClassName("accordion");
var i;
var abc = document.getElementsByClassName("accordion1");
var a;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

for (a = 0; a < abc.length; a++) {
  abc[a].addEventListener("click", function() {
    this.classList.toggle("active1");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

1 个回复
最合适的回答,由SO网友:Ashur 整理而成

“嗨，亲爱的大家，我终于找到了我的问题的解决方案。我想和大家分享一下，希望对大家有所帮助。如果有人能为我的问题提供更好、更精确的解决方案，我将非常高兴。

以下是工作代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #7ED957;
  color: #000;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: 1px solid grey;
  text-align: center;
  outline: none;
border-radius: 5px;
  font-size: 13px;
  transition: 0.4s;
}

.accordion1 {
  background-color: #9df972;
  cursor: pointer;
  width: 95%;
  padding: 3px 0;
  margin: 0 auto;
  border: 1px solid grey;
  text-align: center;
  outline: none;
border-radius: 5px;
  font-size: 13px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #418425; 
  color: #fff;
}

.active1, .accordion1:hover {
  background-color: #418425; 
  color: #fff;
}

.panel {
  padding: 7px 5px;
  display: none;
  padding: 3px;
  background-color: #f7f5f5;
  overflow: hidden;
 text-align: center;
 font-size: 80%;
}

.panel1 {
  display: none;
  width: 95%;
  margin:0 auto;
  padding: 6px 1px;
  background-color: #f7f5f5;
  overflow: hidden;
 text-align: center;
 font-size: 100%;
}

</style>
</head>


<body>


<!-----------------   Update  ---------------------------->


<div>
<h2 style="text-align: center">Updates</h2>

<?php 
        $tkey = \'somaliland-update\';


          $update = new WP_Query(array(
         \'posts_per_page\' => -1,
         \'tag\' => $tkey    
));
wp_reset_postdata();
           if($update->have_posts()) {
         while ($update->have_posts()) {
          $update->the_post(); 
$sample = get_the_content();
$classes =  100;
 for($i = 1; $i <= $classes; $i++) {
preg_match(\'/<strong class="\'.$i.\'">(.*?)<\\/strong>/s\', $sample, $match); 
if($match) {
?>
<button class="accordion">
<?php
echo $match[1];
?>
</button>
<div class="panel">
  <p>
<?php
preg_match(\'/<p class="\'.$i.\'">(.*?)<\\/p>/s\', $sample, $match);
echo $match[1];
?> 
</p>
</div>
<?php }}}} ?>
</div>
<br><br>


<!-----------------   History  ---------------------------->


<div>
<h2 style="text-align: center; font-weight: bold;">History</h2>

<?php 
        $tkey = \'somaliland-history\';


          $update = new WP_Query(array(
         \'posts_per_page\' => -1,
         \'tag\' => $tkey    
));
wp_reset_postdata();
           if($update->have_posts()) {
         while ($update->have_posts()) {
          $update->the_post();
$sampleH = get_the_content();
$classesH = 100;



 for($w =1; $w <= $classesH; $w++) {
     if($w == 1) {
preg_match(\'/<b class="\'.$w.\'">(.*?)<\\/b>/s\', $sampleH, $match); 
if($match) {
?>
<button class="accordion">
<?php echo $match[1]; 
?>
</button>
<div class="panel">
<?php
for($y = 1;$y <= $classesH; $y++) {
preg_match(\'/<strong class="\'.$y.\'">(.*?)<\\/strong>/s\', $sampleH, $match1); 
if($match1) { ?>
<p class="accordion1">
<?php 
echo $match1[1];  
 ?> 

</p>
        <?php
for($z = 1; $z <= $classesH; $z++) {
preg_match(\'/<p class="\'.$y.\'">(.*?)<\\/p>/s\', $sampleH, $match2); 
if($match2) {     
?>           
<span class="panel1">
<?php echo $match2[1];
  ?>
</span>
<?php }}}} ?>
</div>
<?php }

 }





elseif($w == 2){

      preg_match(\'/<b class="\'.$w.\'">(.*?)<\\/b>/s\', $sampleH, $match); 
if($match) {
?>
<button class="accordion">
<?php echo $match[1]; 
?>
</button>
<div class="panel">
<?php
for($y = 1;$y <= $classesH; $y++) {
preg_match(\'/<strong class="0\'.$y.\'">(.*?)<\\/strong>/s\', $sampleH, $match1); 
if($match1) { ?>
<p class="accordion1">
<?php 
echo $match1[1];  
 ?> 

</p>
        <?php
for($z = 1; $z <= $classesH; $z++) {
preg_match(\'/<p class="0\'.$y.\'">(.*?)<\\/p>/s\', $sampleH, $match2); 
if($match2) {     
?>           
<span class="panel1">
<?php echo $match2[1];
  ?>
</span>
<?php }}}} ?>
</div>
<?php }   

}




elseif($w == 3) {

preg_match(\'/<b class="\'.$w.\'">(.*?)<\\/b>/s\', $sampleH, $match); 
if($match) {
?>
<button class="accordion">
<?php echo $match[1]; 
?>
</button>
<div class="panel">
<?php
for($y = 1;$y <= $classesH; $y++) {
preg_match(\'/<strong class="00\'.$y.\'">(.*?)<\\/strong>/s\', $sampleH, $match1); 
if($match1) { ?>
<p class="accordion1">
<?php 
echo $match1[1];  
 ?> 

</p>
        <?php
for($z = 1; $z <= $classesH; $z++) {
preg_match(\'/<p class="00\'.$y.\'">(.*?)<\\/p>/s\', $sampleH, $match2); 
if($match2) {     
?>           
<span class="panel1">
<?php echo $match2[1];
  ?>
</span>
<?php }}}} ?>
</div>
<?php }

}




elseif($w == 4) {

preg_match(\'/<b class="\'.$w.\'">(.*?)<\\/b>/s\', $sampleH, $match); 
if($match) {
?>
<button class="accordion">
<?php echo $match[1]; 
?>
</button>
<div class="panel">
<?php
for($y = 1;$y <= $classesH; $y++) {
preg_match(\'/<strong class="000\'.$y.\'">(.*?)<\\/strong>/s\', $sampleH, $match1); 
if($match1) { ?>
<p class="accordion1">
<?php 
echo $match1[1];  
 ?> 

</p>
        <?php
for($z = 1; $z <= $classesH; $z++) {
preg_match(\'/<p class="000\'.$y.\'">(.*?)<\\/p>/s\', $sampleH, $match2); 
if($match2) {     
?>           
<span class="panel1">
<?php echo $match2[1];
  ?>
</span>
<?php }}}} ?>
</div>
<?php }

}




elseif($w == 5) {

preg_match(\'/<b class="\'.$w.\'">(.*?)<\\/b>/s\', $sampleH, $match); 
if($match) {
?>
<button class="accordion">
<?php echo $match[1]; 
?>
</button>
<div class="panel">
<?php
for($y = 1;$y <= $classesH; $y++) {
preg_match(\'/<strong class="0000\'.$y.\'">(.*?)<\\/strong>/s\', $sampleH, $match1); 
if($match1) { ?>
<p class="accordion1">
<?php 
echo $match1[1];  
 ?> 

</p>
        <?php
for($z = 1; $z <= $classesH; $z++) {
preg_match(\'/<p class="0000\'.$y.\'">(.*?)<\\/p>/s\', $sampleH, $match2); 
if($match2) {     
?>           
<span class="panel1">
<?php echo $match2[1];
  ?>
</span>
<?php }}}} ?>
</div>
<?php }

}





elseif($w == 6) {

preg_match(\'/<b class="\'.$w.\'">(.*?)<\\/b>/s\', $sampleH, $match); 
if($match) {
?>
<button class="accordion">
<?php echo $match[1]; 
?>
</button>
<div class="panel">
<?php
for($y = 1;$y <= $classesH; $y++) {
preg_match(\'/<strong class="00000\'.$y.\'">(.*?)<\\/strong>/s\', $sampleH, $match1); 
if($match1) { ?>
<p class="accordion1">
<?php 
echo $match1[1];  
 ?> 

</p>
        <?php
for($z = 1; $z <= $classesH; $z++) {
preg_match(\'/<p class="00000\'.$y.\'">(.*?)<\\/p>/s\', $sampleH, $match2); 
if($match2) {     
?>           
<span class="panel1">
<?php echo $match2[1];
  ?>
</span>
<?php }}}} ?>
</div>
<?php }

}








 }}}  ?>
</div>



<!-----------------------  Scripts -------------------------->



<script>
var acc = document.getElementsByClassName("accordion");
var i;
var abc = document.getElementsByClassName("accordion1");
var a;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

for (a = 0; a < abc.length; a++) {
  abc[a].addEventListener("click", function() {
    this.classList.toggle("active1");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>

标签： css   the-content   regex   小码农  

相关推荐

前端默认Gutenberg CSS

我想知道如何在前端包含默认的Gutenberg CSS（当没有应用自定义编辑器样式时，我可以在编辑器中看到）。我希望我的the\\u content（）在编辑器中看起来像1:1（字体、边距、填充等）。我需要它来真正知道我在做什么，当我试图在那块。。。编辑添加\\u主题\\u支持（“wp块样式”）；这不是答案，所以你不用麻烦了。很抱歉，我听起来很傲慢，到目前为止，我在各种论坛上收到了太多与此无关的答案，我正在考虑完全放弃WordPress