选择多个带有文本的容器并修剪前150个字符
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选择多个带有文本的容器并修剪前150个字符相关的知识，希望对你有一定的参考价值。
我必须使用javascript选择多个称为blog-post的帖子，然后将所有文本剪裁为前150个字符，但我不知道如何解决。从dom中，我选择所有带querySelectAll()的博客文章，然后尝试寻找一种解决方案来修剪这些字符。
我在这里尝试的摘录示例
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>将很高兴看到我的问题的解决方案，并提供我做错了什么的解释。
答案
document.selectQueryAll不是函数。您可能是说document.querySelectorAll。
您的其余代码几乎是正确的，除了在遍历所选节点时不引用各个元素。我宁愿使用forEach方法，而不是for循环。见下文：
function trimCharacters()
let blogPost = document.querySelectorAll(".blog-post");
blogPost.forEach(d =>
d.textContent = d.textContent.substring(0, 150);
)
trimCharacters();
另一答案
您的解决方案将破坏帖子内的html标记。 blogPost不是HTMLCollection。您不能将任何物品推入其中。您的博客文章包含标题和元数据，据我所知应该保存。要切断所需的字符数，它需要遍历所有子元素，并检查元素的内容是否不超过限制，然后将其放入可替换当前内容的新内容数组中。默认情况下，我在新数组中添加标题和元数据，并将其从我们将要切断的子级中删除。对不起，我的英语不好...
array这是在HTMLCollection上使用数组方法的一个把戏。
[].slice.call()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);以上是关于选择多个带有文本的容器并修剪前150个字符的主要内容，如果未能解决你的问题，请参考以下文章