Saya harus memilih dengan Javascript beberapa posting yang disebut posting blog dan mengambil semua teks dan memangkasnya untuk 150 karakter pertama tetapi saya tidak tahu bagaimana menyelesaikannya. Dari dom, saya memilih semua posting blog dengan querySelectAll() dan kemudian saya mencoba mencari solusi untuk memangkas karakter tersebut.

Contoh cuplikan yang saya coba di sini

function trimCharacters() {
    let blogPost = document.selectQueryAll(".blog-post");
    for (let post in blogPost) {
        blogPost.push(blogPost.textContent.substring(0, 150));
    }
}

trimCharacters();
 <div class="blog-post">
     <h2 class="blog-post-title">Sample blog post</h2>
     <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>

     <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap.
         Basic typography, images, and code are all supported.</p>
     <hr>
     <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus
         mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere
         consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
     <blockquote>
         <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong>
             ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     </blockquote>
     <p>Etiam p
     </p>
 </div>
  <div class="blog-post">
     <h2 class="blog-post-title">Sample blog post</h2>
     <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>

     <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap.
         Basic typography, images, and code are all supported.</p>
     <hr>
     <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus
         mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere
         consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
     <blockquote>
         <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong>
             ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     </blockquote>
     <p>Etiam p
     </p>
 </div>
  <div class="blog-post">
     <h2 class="blog-post-title">Sample blog post</h2>
     <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>

     <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap.
         Basic typography, images, and code are all supported.</p>
     <hr>
     <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus
         mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere
         consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
     <blockquote>
         <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong>
             ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     </blockquote>
     <p>Etiam p
     </p>
 </div>

Akan menghargai untuk melihat solusi untuk masalah saya dengan penjelasan tentang apa yang saya lakukan salah.

0
Jakub 29 Oktober 2019, 20:04

2 jawaban

Jawaban Terbaik

document.selectQueryAll bukan fungsi. Anda mungkin bermaksud document.querySelectorAll.

Sisa kode Anda hampir benar, kecuali bahwa Anda tidak mereferensikan elemen individual saat Anda mengulang melalui node yang dipilih. Saya lebih suka menggunakan metode forEach daripada for loop. Lihat di bawah:

function trimCharacters() {
    let blogPost = document.querySelectorAll(".blog-post");
    blogPost.forEach(d => {
        d.textContent = d.textContent.substring(0, 150);
    })
}

trimCharacters();
1
Matt Simmons 29 Oktober 2019, 17:20

Solusi Anda akan merusak markup HTML di dalam sebuah pos. blogPost ini HTMLCollection bukan array. Anda tidak dapat mendorong sesuatu di dalamnya. Posting blog Anda berisi judul dan metadata yang harus disimpan seperti yang saya pahami. Untuk memotong jumlah karakter yang dibutuhkan, itu perlu melalui semua elemen turunan dan memeriksa apakah konten elemen tidak lebih besar dari batas dan memasukkannya ke dalam larik konten baru yang akan menggantikan konten saat ini. Secara default, saya menambahkan judul dan metadata dalam array baru dan menghapusnya dari anak-anak yang akan kita potong. Maaf untuk bahasa Inggris saya yang buruk ...

[].slice.call() itu hanya trik untuk menggunakan metode array di HTMLCollection.

function trimCharacters(charsToCut) {
    let blogPost = document.querySelectorAll(".blog-post");
    
    blogPost.forEach( post => {
    
      let limit = charsToCut;
      const tagsToSkip = ['HR', 'IMG']; 
      const newContent = [].slice.call(post.children, 0, 2);
      
      [].slice.call(post.children, 2)
        .forEach(postBody => {
        
           if(limit === 0) return;
           
           if(tagsToSkip.indexOf(postBody.tagName) !== -1) return;
           
           if (postBody.textContent.length <= limit) {
              limit -= postBody.textContent.length;
              newContent.push(postBody);
              return;
           }
           
           if(postBody.textContent.length > limit) {
              postBody.textContent = postBody.textContent.slice(0, limit - 3) + '...';
              limit -= postBody.textContent.length;
              newContent.push(postBody);
              return;
           }
           
      });
      
      post.replaceWith(...newContent);
    });
    
}

trimCharacters(150);
<div class="blog-post">
     <h2 class="blog-post-title">Sample blog post1</h2>
     <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>

     <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap.
         Basic typography, images, and code are all supported.</p>
     <hr>
     <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus
         mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere
         consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
     <blockquote>
         <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong>
             ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     </blockquote>
     <p>Etiam p
     </p>
 </div>
  <div class="blog-post">
     <h2 class="blog-post-title">Sample blog post2</h2>
     <p class="blog-post-meta">January 2, 2014 by <a href="#">Mark</a></p>

     <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap.
         Basic typography, images, and code are all supported.</p>
     <hr>
     <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus
         mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere
         consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
     <blockquote>
         <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong>
             ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     </blockquote>
     <p>Etiam p
     </p>
 </div>
  <div class="blog-post">
     <h2 class="blog-post-title">Sample blog post3</h2>
     <p class="blog-post-meta">January 3, 2014 by <a href="#">Mark</a></p>

     <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap.
         Basic typography, images, and code are all supported.</p>
     <hr>
     <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus
         mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere
         consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
     <blockquote>
         <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong>
             ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     </blockquote>
     <p>Etiam p
     </p>
 </div>
0
Ivan Karaman 30 Oktober 2019, 12:06