How to put some fixed length HTML code of some other page on my webpage div.
I’m using a backend api, which returns me the complete HTML content of all posts.
On my page I want to show just the heading and first 3 line of actual text from that webpage.
What HTML tag should I use ?
<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>
The post content that is returned from API, has markup along with the content. But I want to take first 30 or 40 real content from this response and show on UI.
I can not change anything in backend api. only CSS HTML or JS has to handle this.
"content": "<p><span style=\"color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", 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\" /> <span style=\"color: #757575; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\">Photo by </span><a class=\"au mu\" href=\"https://somephotolink.com/al\" rel=\"noopener ugc nofollow\" style=\"box-sizing: inherit; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\" target=\"_blank\">Manvendra</a><span style=\"color: #757575; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\"> on </span><a class=\"au mu\" href=\"https://unsplash.com/?utm_source=medium&utm_medium=referral\" rel=\"noopener ugc nofollow\" style=\"box-sizing: inherit; font-family: fell, Georgia, Cambria, "Times New Roman", 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, "Times New Roman", 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, "Times New Roman", 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\”
>Solution :
Simply create a template tag, insert your content inside it. Then access the innerText (which removes the HTML). Then insert this into the relevant location.
Of course, you’d be better to trim the content using your API. But you haven’t mentioned what server technology you are using.
var content = "<p><span style=\"color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", 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\" /> <span style=\"color: #757575; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\">Photo by </span><a class=\"au mu\" href=\"https://somephotolink.com/al\" rel=\"noopener ugc nofollow\" style=\"box-sizing: inherit; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\" target=\"_blank\">Manvendra</a><span style=\"color: #757575; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\"> on </span><a class=\"au mu\" href=\"https://unsplash.com/?utm_source=medium&utm_medium=referral\" rel=\"noopener ugc nofollow\" style=\"box-sizing: inherit; font-family: fell, Georgia, Cambria, "Times New Roman", 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, "Times New Roman", 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:";
var template = document.createElement('template');
template.innerHTML = content;
template.content.childNodes;
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>