如何把一些固定长度的HTML代码的其他一些网页上我的网页div.

我使用的是后端api,它会返回所有帖子的完整HTML内容.

在我的页面上,我只想显示标题和该网页实际文本的前3行.

我应该使用什么HTML标记?

<div class="posts">
    <div class="post">
        <h2>apiresponse.posts.post.title</h2> <!--psuedo code-->
        <div class="postSample">    
<!--psuedo code--> 30charactersfrom(apiresponse.posts.post.content)

            put first 30 character of readable content of the postfollowd by ... 
            see below content to when what response I get back from api
        <div>
    </div>
    <!--many such repeated divs based upon api response-->
<div>

从API返回的帖子内容带有标记和内容.但我想从这个回复中获取前30或40个真实内容,并显示在UI上.

"content": "<p><span style=\"color: #292929; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px; letter-spacing: -0.003em;\">This is line ione in my post. This is line two from the post.</span></p><p><br /></p><p><img alt=\"\" class=\"cf td te\" height=\"467\" role=\"presentation\" src=\"https://miro.medium.com/max/1400/0*zTHDVE-0s8Wyajw7\" style=\"box-sizing: inherit; height: auto; max-width: 100%; vertical-align: middle; width: 692px;\" width=\"700\" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<span style=\"color: #757575; font-family: fell, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 14px; text-align: center;\">Photo by&nbsp;</span><a class=\"au mu\" href=\"https://somephotolink.com/al\" rel=\"noopener ugc nofollow\" style=\"box-sizing: inherit; font-family: fell, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 14px; text-align: center;\" target=\"_blank\">Manvendra</a><span style=\"color: #757575; font-family: fell, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 14px; text-align: center;\">&nbsp;on&nbsp;</span><a class=\"au mu\" href=\"https://unsplash.com/?utm_source=medium&amp;utm_medium=referral\" rel=\"noopener ugc nofollow\" style=\"box-sizing: inherit; font-family: fell, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 14px; text-align: center;\" target=\"_blank\">Unsplash</a></p><div class=\"pk pl pm pn po l\" style=\"box-sizing: inherit; margin-bottom: 40px;\"><div class=\"o eb\" style=\"box-sizing: inherit; display: flex; justify-content: center;\"><div class=\"eq cf gt gu gv gw gx gy gz ha hb\" style=\"box-sizing: inherit; margin: 0px 32px; max-width: 692px; min-width: 0px; width: 692px;\"><article style=\"box-sizing: inherit;\"><div class=\"l\" style=\"box-sizing: inherit;\"><div class=\"l\" style=\"box-sizing: inherit;\"><section style=\"box-sizing: inherit;\"><div style=\"box-sizing: inherit;\"><div class=\"kt of qy qz ra\" style=\"box-sizing: inherit; word-break: break-word; word-wrap: break-word;\"><p class=\"pw-post-body-paragraph ry rz rc sa b sb sc hr sd se sf hv sg kc sh si sj sk sl sm sn so sp sq sr ss kt dr\" data-selectable-paragraph=\"\" id=\"5abb\" style=\"box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;\">This is line 3 from the post .This is line 4 from the post . This is line 5 from the post . This is line 3 from the post .xxxxxxxxx. xxxxxxxxxxx.xxxxxxxxxxx.</p></div><div class=\"o eb jm fp nz ti\" role=\"separator\" style=\"box-sizing: inherit; display: flex; justify-content: center; margin-bottom: 14px; margin-top: 32px; padding-bottom: 10px; padding-top: 24px;\"><span class=\"tj mc cj tk tl fe\" style=\"background-color: #080808; border-radius: 50%; box-sizing: inherit; display: inline-block; height: 3px; margin-right: 20px; width: 3px;\"></span><span class=\"tj mc cj tk tl fe\" style=\"background-color: #080808; border-radius: 50%; box-sizing: inherit; display: inline-block; height: 3px; margin-right: 20px; width: 3px;\"></span><span class=\"tj mc cj tk tl\" style=\"background-color: #080808; border-radius: 50%; box-sizing: inherit; display: inline-block; height: 3px; width: 3px;\"></span></div><div class=\"kt of qy qz ra\" style=\"box-sizing: inherit; word-break: break-word; word-wrap: break-word;\"><h1 class=\"tm tn rc oo ds to tp tq ht ka tr kb hx ts tt tu ib ke tv kf if kg tw kh ij tx dr\" data-selectable-paragraph=\"\" id=\"6896\" style=\"box-sizing: inherit; color: #292929; font-family: fell, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 22px; letter-spacing: 0px; line-height: 28px; margin: 2.05em 0px -0.37em;\">History</h1><h2 class=\"ty tn rc oo ds jy tz jz ht ua ub uc hx kc ud kd ib sk ue uf if so ug uh ij ui dr\” 

推荐答案

只需创建一个模板标签,将内容插入其中.然后访问innerText(删除HTML).然后将其插入相关位置.

当然,您最好使用API来修剪内容.但是你没有提到你正在使用什么服务器技术.

let content = "<p><span style=\"color: #292929; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px; letter-spacing: -0.003em;\">This is line one in my post. This is line two from the post.</span></p><p><br /></p><p><img alt=\"\" class=\"cf td te\" height=\"467\" role=\"presentation\" src=\"https://miro.medium.com/max/1400/0*zTHDVE-0s8Wyajw7\" style=\"box-sizing: inherit; height: auto; max-width: 100%; vertical-align: middle; width: 692px;\" width=\"700\" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<span style=\"color: #757575; font-family: fell, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 14px; text-align: center;\">Photo by&nbsp;</span><a class=\"au mu\" href=\"https://somephotolink.com/al\" rel=\"noopener ugc nofollow\" style=\"box-sizing: inherit; font-family: fell, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 14px; text-align: center;\" target=\"_blank\">Manvendra</a><span style=\"color: #757575; font-family: fell, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 14px; text-align: center;\">&nbsp;on&nbsp;</span><a class=\"au mu\" href=\"https://unsplash.com/?utm_source=medium&amp;utm_medium=referral\" rel=\"noopener ugc nofollow\" style=\"box-sizing: inherit; font-family: fell, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 14px; text-align: center;\" target=\"_blank\">Unsplash</a></p><div class=\"pk pl pm pn po l\" style=\"box-sizing: inherit; margin-bottom: 40px;\"><div class=\"o eb\" style=\"box-sizing: inherit; display: flex; justify-content: center;\"><div class=\"eq cf gt gu gv gw gx gy gz ha hb\" style=\"box-sizing: inherit; margin: 0px 32px; max-width: 692px; min-width: 0px; width: 692px;\"><article style=\"box-sizing: inherit;\"><div class=\"l\" style=\"box-sizing: inherit;\"><div class=\"l\" style=\"box-sizing: inherit;\"><section style=\"box-sizing: inherit;\"><div style=\"box-sizing: inherit;\"><div class=\"kt of qy qz ra\" style=\"box-sizing: inherit; word-break: break-word; word-wrap: break-word;\"><p class=\"pw-post-body-paragraph ry rz rc sa b sb sc hr sd se sf hv sg kc sh si sj sk sl sm sn so sp sq sr ss kt dr\" data-selectable-paragraph=\"\" id=\"5abb\" style=\"box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;\">This is line 3 from the post .This is line 4 from the post . This is line 5 from the post . This is line 3 from the post .xxxxxxxxx. xxxxxxxxxxx.xxxxxxxxxxx.</p></div><div class=\"o eb jm fp nz ti\" role=\"separator\" style=\"box-sizing: inherit; display: flex; justify-content: center; margin-bottom:"; 

let template = document.createElement('template');
template.innerHTML = content;

let partial = template.content.textContent.substring(0, 30);

document.querySelector(".posts .post .postSample").innerText = partial;
<div class="posts">
    <div class="post">
        <h2>apiresponse.posts.post.title</h2> <!--psuedo code-->
        <div class="postSample">    
        <div>
    </div>
    <!--many such repeated divs based upon api response-->
<div>

Html相关问答推荐

在Apps Script中连接CSS与HTML

在css嵌套 Select 器中,尾随的`&;‘是什么意思?

悬停效果在新西兰表上不起作用

尽管div高度为100%,div中的内容仍会溢出

HTMLTag属性内的svelte+TS类型声明

如何在VB.NET中用打印预览和直接打印的方式在Html中打印数据表的内容,包括页眉/设置纸张/方向/适合页面/总计

如何使div填充父项的剩余高度

使用CSS和Slick Carcass使图像适合屏幕

减小HTML负载中base64字符串的大小

阴影部分内部的ionic Select 元素

CSS:双面元素未正确显示边框

按钮位于主 div 的底部而不是内部 Div

使用 Thymeleaf 将图像水平居中

获取链接到功能的网页表单

发送带有图像的Google文档作为HTML格式的邮件正文不再起作用

如何更改 Quarto 中标签crossref-def-title的标题 colored颜色 ?

表格中每 4 行条纹一次

在包含 html 标签的字符串的子字符串中应用不同的样式

th 内的 div 标签没有占据全高

嵌套固定定位的 Div 滚动条渗透到前景中的 Div