Home / Questions / 342369
Accepted
Jose Dario Correa
Asked: 2020-04-01 14:15:39 +0800 CST 2020-04-01 14:15:39 +0800 CST

Show only first paragraph <p> with MySQL or PHP

  • 772

When making a query in MySQL with PHP I get the following result:

<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>

Several paragraphs with their respective HTML tag<p>

I need to display <div>the first paragraph in one and the remaining paragraphs <p>in another .<div>

Something like this:

<div class="sumario">
    <p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
</div>
<div class="cuerpo">
    <p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
</div>

So far the only thing that has occurred to me is to do the following for the summary:

<?php echo substr(strip_tags($body, '<p>'), 0, 250); ?>

php

3 Answers

  1. Best Answer

    Recommendation:

    Well, you can treat it with pure JS, this way you don't mix backend code (PHP) with the use of HTML tags:

    • You get all the paragraphs and store them in a variable usingquerySelectorAll
    • As in that variable you have a nodeList you can iterate the elements or indicate the access by means of its index or position
    • You declare 2 classes at the CSS level, one for each possible scenario
    • Inside foreachwe assign the class to each element
    • To reset and assign a different class to the first element we simply indicate its position or index and give it the desired class

    With the above:

    • The first paragraph will have the class .primeroand will be red
    • The rest of the paragraphs will have the class .segundoand will be green

    EXAMPLE

        <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Código</title>
      <style>
        .primero {
          color: red;
        }
        .segundo {
          color: green; 
        }
      </style>
    </head>
    <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi tempore maxime deserunt architecto. Pariatur odit amet laudantium, commodi aut temporibus inventore mollitia iusto sapiente nemo sequi maiores, ut, vel.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi tempore maxime deserunt architecto. Pariatur odit amet laudantium, commodi aut temporibus inventore mollitia iusto sapiente nemo sequi maiores, ut, vel.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi tempore maxime deserunt architecto. Pariatur odit amet laudantium, commodi aut temporibus inventore mollitia iusto sapiente nemo sequi maiores, ut, vel.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi tempore maxime deserunt architecto. Pariatur odit amet laudantium, commodi aut temporibus inventore mollitia iusto sapiente nemo sequi maiores, ut, vel.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi tempore maxime deserunt architecto. Pariatur odit amet laudantium, commodi aut temporibus inventore mollitia iusto sapiente nemo sequi maiores, ut, vel.
    </p>
    <script>
        let parrafos = document.querySelectorAll("p")
        
        
        parrafos.forEach((elemento) => {
            elemento.setAttribute("class", "segundo")
        })
        parrafos[0].setAttribute("class", "primero")
        
    </script>
    </body>
    </html>

    • 1

  2. Going by the answer @BetaM gave me, I did the following:

    as i have two<div>

    <div id="sumario"></div>
<div id="cuerpo"></div>`

    First I print everything in it <div id="cuerpo">and then with jQuery I move the first paragraph to <div id="sumario">:

    var body = $("#cuerpo p");

$.each(body, function() {
  $('#sumario').append(body[0]);
});
    • 1

  3. Look for the first closing paragraph tag to get the summary, and from there you get the body:

    <?php

$html = <<<EOT
<p>Primer párrafo: Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
EOT;

// Obtener posición de primer cierre de párrafo
// Y agregar 5 (1 para posición) para incluir la etiqueta completa (4)
$cuenta = mb_strpos($html, '</p>') + 5;

// Obtener primer párrafo
$sumario = mb_substr($html, 0, $cuenta);

// Obtener resto del texto
$cuerpo = mb_substr($html, $cuenta + 1);

echo <<<EOT
<div class="sumario">
    $sumario
</div>
<div class="cuerpo">
    $cuerpo
</div>
EOT;

    Note: I am using the HEREDOC structure to create and display strings.

    • 0