{"id":20482,"date":"2022-11-09T20:10:29","date_gmt":"2022-11-09T14:40:29","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/"},"modified":"2022-11-09T20:10:29","modified_gmt":"2022-11-09T14:40:29","slug":"solved-truncate-text-preserving-keywords","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/","title":{"rendered":"[Solved] Truncate text preserving keywords"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

\"Javascript<\/a><\/p>\n<\/p>\n

\n
\n
const regEsc = (str) => str.replace(\/[-\\\/\\\\^$*+?.()|[\\]{}]\/g, \"\\\\$&\");\n\nconst string = \"Lorem Ipsum is simply dummy book text of the printing and text book typesetting industry. Dummy Lorem Ipsum has been the industry's standard dummy Ipsum text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\";\nconst queryString = \"lorem\";\n\nconst rgxp = new RegExp(\"(\\\\S*.{0,10})?(\"+ regEsc(queryString) +\")(.{0,10}\\\\S*)?\", \"ig\");\nconst results = [];\n\nstring.replace(rgxp, function(m, $1, $2, $3){\n  results.push(`${$1?\"\u2026\"+$1:\"\"}<b>${$2}<\/b>${$3?$3+\"\u2026\":\"\"}`);\n});\n\ndocument.body.innerHTML =  string.replace(rgxp, \"<span>$1<b>$2<\/b>$3<\/span>\") ;<\/code><\/pre>\n
span{background:yellow;}\nb{color:red}<\/code><\/pre>\n<\/div>\n<\/div>\n
The RegExp:<\/h3>\n
Let’s say we have a long string and want to match all book<\/strong><\/em> or Book<\/strong><\/em> word appearances,
\nthis regex would do it:<\/p>\n
\/book\/ig  \n<\/code><\/pre>\n
(ig<\/code> are (case)Insensitive and Global flags)<\/sup><\/p>\n
but we need not only to get book<\/strong><\/em> but also some truncated portions of text before and after that match. Let’s say 10 characters before and 10 characters after:<\/p>\n
\/.{0,10}book.{0,10}\/ig\n<\/code><\/pre>\n
.<\/code> means any character except linebreak<\/em>, and {minN, maxN}<\/code> is the quantifier<\/em> of how many of such characters we want to match.<\/sup><\/p>\n
To be able to differentiate the prefixed<\/em> chunk, the match<\/em> and the suffixed<\/em> chunk so we can use them separately (i.e: for wrapping in <b><\/code> bold tags etc.), let’s use Capturing Group<\/em> ()<\/code><\/p>\n
\/(.{0,10})(book)(.{0,10})\/ig\n<\/code><\/pre>\n
The above will match both Book<\/code> and book<\/code> in<\/p>\n
\n
“Book<\/strong> an apartment and read a book<\/strong> of nice little fluffy animals”<\/em><\/p>\n<\/blockquote>\n
in order to know when to add Ellipsis we need to make those chunks “optional” let’s apply Lazy Quantifier<\/em>s ?<\/code><\/p>\n
\/(.{0,10})?(book)(.{0,10})?\/ig\n<\/code><\/pre>\n
now a capturing group might result empty. Used with a Conditional Operator ?:<\/code> as boolean you can assert ellipsis like: ($1 ? \"\u2026\"+$1 : \"\")<\/code><\/sup><\/p>\n
now what we captured would look like:<\/p>\n
\n
Book<\/strong> an apartm
\nnd read a book<\/strong> of nice l<\/p>\n<\/blockquote>\n
(I’ve bolded the queryString just for visuals)<\/sup><\/p>\n
To fix that ugly-cutted words, let’s prepend (append) any number *<\/code> of non whitespace characters \\S<\/code><\/p>\n
\/(\\S*.{0,10})?(book)(.{0,10}\\S*)?\/ig\n<\/code><\/pre>\n
The result is now:<\/p>\n
\n
Book<\/strong> an apartment
\nand read a book<\/strong> of nice little<\/p>\n<\/blockquote>\n
(See above’s regex details at regex101<\/a><\/strong><\/em>)<\/p>\n
let’s now convert the Regex<\/em> notation to RegExp String<\/strong> (escaping the backshash characters and putting our ig<\/code> flags in the second argument).<\/p>\n
new RegExp(\"(\\\\S*.{0,10})?(book)(.{0,10}\\\\S*)?\", \"ig\");\n<\/code><\/pre>\n
Thanks of the use of new RegExp<\/code> method we can now pass variables into:<\/p>\n
var queryString = \"book\";\nvar rgxp = new RegExp(\"(\\\\S*.{0,10})?(\"+ queryString +\")(.{0,10}\\\\S*)?\", \"ig\");\n<\/code><\/pre>\n
Finally to retrieve and use our three captured Groups we can access them inside the .replace()<\/code> String parameter<\/a> using \"$1\"<\/code>, \"$2\"<\/code> and \"$3\"<\/code> (See demos).
\nor also for more freedom we can use instead of String Parameter a callback function passing the needed arguments .replace(rgxp, function(match, $1, $2, $3){<\/code><\/p>\n
Note:<\/strong><\/p>\n
This code will not return overlapping matches<\/strong>. Let’s say we search in the above string for \"an\"<\/code>. it’ll not return two matches for “an” & “and” but only for the first<\/strong> \"an\"<\/code> since the other one is too close the the first one, and the regex already consumed the later characters due to the up-to-Max<\/em> 10<\/code> in .{0,10}<\/code>. More info.<\/p>\n
If the source string has HTML tags in it, make sure (for ease sake) to search only trough the text content only (not the HTML string) – otherwise a more complicated approach would be necessary.<\/p>\n
Useful resources:<\/strong><\/p>\n
https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/RegExp<\/a>
https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/replace<\/a>
http:\/\/www.rexegg.com\/regex-quickstart.html<\/a><\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Truncate text preserving keywords <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] const regEsc = (str) => str.replace(\/[-\\\/\\\\^$*+?.()|[\\]{}]\/g, “\\\\$&”); const string = “Lorem Ipsum is simply dummy book text of the printing and text book typesetting industry. Dummy Lorem Ipsum has been the industry’s standard dummy Ipsum text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[333,347,1212],"class_list":["post-20482","post","type-post","status-publish","format-standard","hentry","category-solved","tag-javascript","tag-regex","tag-replace"],"yoast_head":"\n[Solved] Truncate text preserving keywords - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Truncate text preserving keywords - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] const regEsc = (str) => str.replace(\/[-\/\\^$*+?.()|[]{}]\/g, "\\$&"); const string = "Lorem Ipsum is simply dummy book text of the printing and text book typesetting industry. Dummy Lorem Ipsum has been the industry's standard dummy Ipsum text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-09T14:40:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/11\/Solved-Truncate-text-preserving-keywords.png\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Truncate text preserving keywords\",\"datePublished\":\"2022-11-09T14:40:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/\"},\"wordCount\":443,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/11\/Solved-Truncate-text-preserving-keywords.png\",\"keywords\":[\"javascript\",\"regex\",\"replace\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/\",\"name\":\"[Solved] Truncate text preserving keywords - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/11\/Solved-Truncate-text-preserving-keywords.png\",\"datePublished\":\"2022-11-09T14:40:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#primaryimage\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/11\/Solved-Truncate-text-preserving-keywords.png\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/11\/Solved-Truncate-text-preserving-keywords.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Truncate text preserving keywords\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Truncate text preserving keywords - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Truncate text preserving keywords - JassWeb","og_description":"[ad_1] const regEsc = (str) => str.replace(\/[-\/\\^$*+?.()|[]{}]\/g, \"\\$&\"); const string = \"Lorem Ipsum is simply dummy book text of the printing and text book typesetting industry. Dummy Lorem Ipsum has been the industry's standard dummy Ipsum text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/","og_site_name":"JassWeb","article_published_time":"2022-11-09T14:40:29+00:00","og_image":[{"url":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/11\/Solved-Truncate-text-preserving-keywords.png","type":"","width":"","height":""}],"author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Truncate text preserving keywords","datePublished":"2022-11-09T14:40:29+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/"},"wordCount":443,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"image":{"@id":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#primaryimage"},"thumbnailUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/11\/Solved-Truncate-text-preserving-keywords.png","keywords":["javascript","regex","replace"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/","url":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/","name":"[Solved] Truncate text preserving keywords - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#primaryimage"},"image":{"@id":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#primaryimage"},"thumbnailUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/11\/Solved-Truncate-text-preserving-keywords.png","datePublished":"2022-11-09T14:40:29+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#primaryimage","url":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/11\/Solved-Truncate-text-preserving-keywords.png","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/11\/Solved-Truncate-text-preserving-keywords.png"},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-truncate-text-preserving-keywords\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Truncate text preserving keywords"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=20482"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20482\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=20482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=20482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=20482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}