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 >
<div >
<h2>apiresponse.posts.post.title</h2> <!--psuedo code-->
<div >
<!--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\”
CodePudding user response：
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 >
<div >
<h2>apiresponse.posts.post.title</h2> <!--psuedo code-->
<div >
<div>
</div>
<!--many such repeated divs based upon api response-->
<div>CodePudding user response：
If you actually want to divide it by the number of characters, you could do content.substring(0,30) to get the first 30 characters in a string.
However, this method doesn't seem reliable if the response you get is dynamic.