Javascript/Jquery - Remove all text content - except for the last 10 characters (or 3 words) - before an element

Question

I would like to remove all content inside the <p class="content"> paragraph before the element, EXCEPT for the last 10 characters, and ideally add ... before the first character:

I have this:

<p class="content">It sportsman earnestly ye preserved an on. Moment led family sooner cannot her window pulled any. Or raillery if improved landlord to speaking hastened differed he. Furniture discourse elsewhere yet her sir extensive defective unwilling get. Why resolution one motionless you him thoroughly. Noise is round to in it quick timed doors. <span class="highlight">loving</span> family. Born in Brewer, ME on August 21, 1934, she was the daughter of Able. Written address greatly get attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had judgment out opinions property the supplied. </p>

And I would like to end up with something like this (it can also by by word - 2 or 3 words before the <span class="highlight">

<p class="content">...med doors. <span class="highlight">loving</span> family. Born in Brewer, ME on August 21, 1934, she was the daughter of Able. Written address greatly get attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had judgment out opinions property the supplied. </p>

Answer 1

You can use split to identify the highlight tag and add it before remove the letters. Create a var with total letter to rest after ... ;

Check this example:

 var el = document.querySelector('.content'); var amountLetterBeforeHighlight = 25; var splitEl = el.innerHTML.split('<span class="highlight">') el.innerHTML = '... :rest<span class="highlight">:splitRest '.replace(/\\:rest/g, splitEl[0].substr(splitEl[0].length - amountLetterBeforeHighlight)).replace(/\\:splitRest/g, splitEl[1])

 .highlight { color: blue }

 <p class="content">It sportsman earnestly ye preserved an on. Moment led family sooner cannot her window pulled any. Or raillery if improved landlord to speaking hastened differed he. Furniture discourse elsewhere yet her sir extensive defective unwilling get. Why resolution one motionless you him thoroughly. Noise is round to in it quick timed doors. <span class="highlight">loving</span> family. Born in Brewer, ME on August 21, 1934, she was the daughter of Able. Written address greatly get attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had judgment out opinions property the supplied. </p>

EDIT:

So you want to create with multiples paragraphs, so check this out:

 var els = document.querySelectorAll('.content'); var amountLetterBeforeHighlight = 25; els.forEach(el => { var splitEl = el.innerHTML.split('<span class="highlight">'); el.innerHTML = '... :rest<span class="highlight">:splitRest '.replace(/\\:rest/g, splitEl[0].substr(splitEl[0].length - amountLetterBeforeHighlight)).replace(/\\:splitRest/g, splitEl[1]); });

 .highlight {color: blue}

 <p class="content">It sportsman earnestly ye preserved an on. Moment led family sooner cannot her window pulled any. Or raillery if improved landlord to speaking hastened differed he. Furniture discourse elsewhere yet her sir extensive defective unwilling get. Why resolution one motionless you him thoroughly. Noise is round to in it quick timed doors. <span class="highlight">loving</span> family. Born in Brewer, ME on August 21, 1934, she was the daughter of Able. Written address greatly get attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had judgment out opinions property the supplied. </p> <p class="content">It sportsman earnestly ye preserved an on. Moment led family sooner cannot her window pulled any. Or raillery if improved landlord to speaking hastened differed he. Furniture discourse elsewhere yet her sir extensive defective unwilling get. Why resolution one motionless you him thoroughly. Noise is round to in it quick timed doors. <span class="highlight">loving</span> family. Born in Brewer, ME on August 21, 1934, she was the daughter of Able. Written address greatly get attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had judgment out opinions property the supplied. </p> <p class="content">It sportsman earnestly ye preserved an on. Moment led family sooner cannot her window pulled any. Or raillery if improved landlord to speaking hastened differed he. Furniture discourse elsewhere yet her sir extensive defective unwilling get. Why resolution one motionless you him thoroughly. Noise is round to in it quick timed doors. <span class="highlight">loving</span> family. Born in Brewer, ME on August 21, 1934, she was the daughter of Able. Written address greatly get attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had judgment out opinions property the supplied. </p>

No matter what is inside, after the code find the highlight tag then apply to each el at time.

Hope this help!

Answer 2

See the example below, comments within code.

 //get innerHTML of p var p = document.getElementById("p").innerHTML; //check length of p - uncomment below to see length //console.log(p.length) //length of p was 611 so we just want to get index 605 - 611 of p var pslice = p.slice(605,611); //declare new p for example by id "shortp" var shortp = document.getElementById("shortp") //set innerHTML of example "shortp" with ... + pslice shortp.innerHTML = "..." + pslice

 <p id="p" class="content">It sportsman earnestly ye preserved an on. Moment led family sooner cannot her window pulled any. Or raillery if improved landlord to speaking hastened differed he. Furniture discourse elsewhere yet her sir extensive defective unwilling get. Why resolution one motionless you him thoroughly. Noise is round to in it quick timed doors. <span class="highlight">loving</span> family. Born in Brewer, ME on August 21, 1934, she was the daughter of Able. Written address greatly get attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had judgment out opinions property the supplied.</p> <p><i>Your shortened example below</i></p> <p id="shortp"></p>