truncate-element/truncate-element.min.js

With this package, you can make any changes you want on the text. Don't worry about the framework. It is a custom element and is compatible with all JavaScript frameworks.

!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define("truncate-element",[],i):"object"==typeof exports?exports["truncate-element"]=i():t["truncate-element"]=i()}(window,(function(){return function(t){var i={};function e(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,e),s.l=!0,s.exports}return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{enumerable:!0,get:n})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,i){if(1&i&&(t=e(t)),8&i)return t;if(4&i&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(e.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&i&&"string"!=typeof t)for(var s in t)e.d(n,s,function(i){return t[i]}.bind(null,s));return n},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},e.p="",e(e.s=0)}([function(t,i,e){t.exports=e(1)},function(t,i,e){"use strict";e.r(i);class n{constructor(t){}}class s{constructor(t){this.word="",this.length=0,this.type="simple",this.html="",this.word=t,this.length=t.length}}class h{constructor(t){this.Number=t}cut(t){let i=0;for(i=this.Number;i<t.length&&" "!=t[i];i++);return t.substring(0,i)}}class o extends n{constructor(t){super(t),this.LinkCount=0,this.LinkList=[],t.identifyLink?this.IdentifyLink=t.identifyLink:this.IdentifyLink={enabled:!1}}process(t){let i,e="(ftp:\\/\\/|(https?:)\\/\\/(www\\.)?|www\\.)",n="",s="\\w+";let h;for(this.IdentifyLink.protocol&&this.IdentifyLink.protocol.length>0&&(e=this.recognizingProtocol()),this.IdentifyLink.domain&&this.IdentifyLink.domain.length>0&&(n=this.recongnizingDomain()),this.IdentifyLink.hasQueryString&&(s="(((\\:|\\/|\\?){1}\\S*)*|\\w+)+"),i=new RegExp(`(^|[ ])${e}[0-9a-zA-Z]([-.\\w]+)${n}${s}`,"gm");null!==(h=i.exec(t.word));){this.LinkList.push(h[0]);let i=h[0];"www"===h[0].substring(0,3)&&(i="http://"+h[0]),t.html=`<a href=${i} ${this.IdentifyLink.target?"target="+this.IdentifyLink.target:""} ${this.IdentifyLink.title?"title="+this.IdentifyLink.title:""} ${this.IdentifyLink.class?'class="'+this.IdentifyLink.class+'"':""} ${this.IdentifyLink.style?"style="+this.IdentifyLink.style:""}>${t.html?t.html:t.word}</a>`,t.type+=" link"}return t}recognizingProtocol(){if(this.IdentifyLink.protocol&&this.IdentifyLink.protocol.length>0){this.IdentifyLink.protocol=this.IdentifyLink.protocol.sort();let t=[];return this.IdentifyLink.protocol.find(t=>"ftp"===t)&&t.push("ftp:\\/\\/"),this.IdentifyLink.protocol.find(t=>"http"===t)&&t.push("http:\\/\\/(www\\.)?"),this.IdentifyLink.protocol.find(t=>"https"===t)&&t.push("https:\\/\\/(www\\.)?"),this.IdentifyLink.protocol.find(t=>"www"===t)&&t.push("www\\.?"),"("+t.join("|")+")"}return""}recongnizingDomain(){return this.IdentifyLink.domain?"("+this.IdentifyLink.domain.join("|")+")":""}}class r extends n{process(t){return/(^|\s)(@[^\d\.\s](\w{1,30}|\.)+)$/gim.test(t.word)&&(t.type+=" mention",t.html=`<span class=mention style=color:#0095f6>${t.html?t.html:t.word}</span>`),t}}class l extends n{process(t){return/(^|\s)(#[\p{Pc}\p{N}\p{L}\u200cÀ-ÖØ-öø-ʸ(_)]+)$/gimu.test(t.word)&&(t.html=`<span class=hashtag style=color:#1b95e0>${t.html?t.html:t.word}</span>`,t.type+=" hashtag"),t}}class a extends n{constructor(t){super(t),this.highlightQuery=[],this.highlightCondition="",this.nestedHighlightArray=[],this.checkedNestedHighlight=!1,window.highlight=this,t.highlightList?this.highlightQuery=t.highlightList.map(t=>{let i={};return this.instanceOfHighlighQuery(t)?(i.name=t.name,i.color=t.color):(i.name=t,i.color="yellow"),i.tag="",i.index=0,i.existInAnotherQuery=!1,i.parent="",i.parentTag="",i.content="",i}):this.highlightQuery=[],this.highlightCondition=t.highlightCondition,this.highlightQuery.length&&this.highlightQuery.sort((t,i)=>t.name.length-i.name.length),this.checkedNestedHighlight?this.nestedHighlightArray=[]:this.nestedHighlightArray=this.findHighlightInAnother()}findHighlightInAnother(){const t=this.highlightQuery[0];t.tag=this.createTag(t.color,t.name),t.existInAnotherQuery=!1,t.content="",t.parent="",t.parentTag="";for(let t=1;t<this.highlightQuery.length;t++){const i=this.highlightQuery[t],e=this.highlightQuery[t-1];if(i.name.includes(e.name))this.transform(i,e);else{let e=t;for(;e>=1;){let t=this.highlightQuery[e-1];if(i.name.includes(t.name)){this.transform(i,t);break}1==e&&(i.tag=this.createTag(i.color,i.name),i.content="",i.parent="",i.parentTag=""),e--}}}const i=this.highlightQuery.filter(t=>t.existInAnotherQuery);return this.highlightQuery=this.highlightQuery.filter(t=>!t.existInAnotherQuery),this.checkedNestedHighlight=!0,i}transform(t,i){i.parent=t.name,t.content=t.name.replace(i.name,i.tag),i.parentTag=this.createTag(t.color,t.content),t.tag=i.parentTag,i.existInAnotherQuery=!0,t.existInAnotherQuery=!1}instanceOfHighlighQuery(t){return"string"!=typeof t&&"name"in t}process(t){if(!this.highlightQuery||!this.highlightQuery.length)return t;if("exactly"==this.highlightCondition){for(let i of this.highlightQuery){if(i.name.length>t.length)continue;const e="(^|(?<!\\p{L}))("+i.name+")(?!(\\p{L}))",n=new RegExp(e,"gmu");return n.test(t.word)&&(n.lastIndex=0,t.html=this.createTag(i.color,i.name),t.type=t.type.concat(" highlight")),t}return t}if(this.nestedHighlightArray.length)for(let i=this.nestedHighlightArray.length;i--;0==i){const e=this.nestedHighlightArray[i],n=new RegExp(e.name,"gmi");if(n.test(t.word)){n.lastIndex=0,t.html=t.word.replace(new RegExp(e.name,"gm"),e.tag);break}}if(this.highlightQuery.length)for(const i of this.highlightQuery){const e=new RegExp(i.name,"gmi");if(e.test(t.word))if(e.lastIndex=0,t.html&&1==t.html.split(i.name).length)t.html=t.word.replace(new RegExp(i.name,"gmu"),i.tag);else if(t.html){let e=t.html.split(i.name);for(let t=0;t<e.length&&t!=e.length-1;t++)e[t]=e[t]+i.tag;t.html=e.join("")}else t.html=t.word.replace(new RegExp(i.name,"gmu"),t=>`<span style="background:${i.color}">${t}</span>`)}return t}createTag(t,i){return`<span style="background:${t}">${i}</span>`}}class c extends n{process(t){return new s(t)}}class d extends HTMLElement{constructor(){super(),this._highlightQuery=[],this.config={number:0,more:"",less:"",completeWord:!1,hashtag:!1,hasLiteral:!1,highlightCondition:"exactly",highlightList:[{name:"",color:""}],mention:!1},this.number=100,this.more="show",this.less="hide",this.completeWord=!1,this.hashtag=!1,this.hasLiteral=!1,this.highlightCondition="exactly",this.highlightList=[{name:"",color:""}],this.text="",this.truncated=!1,this.mention=!1,this.identifyLink={hasQueryString:!1,title:"",class:"",style:"text-decoration:none;color:blue;",domain:[],protocol:[],target:"_blank",enabled:!1},this.userModels=[],this.linkList=[],this.linkCount=0,this.hashtagCount=0,this.mentionCount=0,this.connectedLoaded=!1,this.dataLoaded=!1,this.tempHtml="",this.wordArray=[],this.remainText="",this.fullText="",this.truncatedWord={model:new s(""),index:0},this.processModels=[],window.trun=this;new MutationObserver(()=>{this.connectedLoaded&&!this.dataLoaded&&this.initialValues()}).observe(this,{characterData:!1,childList:!0,attributes:!1})}addUserModel(...t){this.userModels.push(...t.map(t=>({model:t})))}connectedCallback(){setTimeout(()=>{this.initialValues()},0),this.connectedLoaded=!0}attributeChangedCallback(t,i,e){this.connectedLoaded&&this.initialValues(t)}static get observedAttributes(){return["config"]}initialValues(t="config"){if(!this.innerHTML)return;this.tempHtml||(this.tempHtml=this.innerHTML);const i=this.getAttribute(t);(null==i?void 0:i.length)&&(this.config=JSON.parse(i),this.number=this.config.number?this.config.number:this.number,this.more=this.config.more?this.config.more:this.more,this.less=this.config.less?this.config.less:this.less,this._highlightQuery=this.config.highlightList?this.config.highlightList:this._highlightQuery,this.highlightCondition=this.config.highlightCondition?this.config.highlightCondition:this.highlightCondition,this.completeWord=this.config.completeWord?this.config.completeWord:this.completeWord,this.hashtag=this.config.hashtag?this.config.hashtag:this.hashtag,this.hasLiteral=this.config.hasLiteral?this.config.hasLiteral:this.hasLiteral,this.mention=this.config.mention?this.config.mention:this.mention,this.config.identifyLink&&(this.identifyLink.enabled=this.config.identifyLink.enabled,this.identifyLink.title=this.config.identifyLink.title?this.config.identifyLink.title:this.identifyLink.title,this.identifyLink.class=this.config.identifyLink.class?this.config.identifyLink.class:this.identifyLink.class,this.identifyLink.style=this.config.identifyLink.style?this.config.identifyLink.style:this.identifyLink.style,this.identifyLink.domain=this.config.identifyLink.domain?this.config.identifyLink.domain:this.identifyLink.domain,this.identifyLink.protocol=this.config.identifyLink.protocol?this.config.identifyLink.protocol:this.identifyLink.protocol,this.identifyLink.target=this.config.identifyLink.target?this.config.identifyLink.target:this.identifyLink.target,this.identifyLink.hasQueryString=this.config.identifyLink.hasQueryString?this.config.identifyLink.hasQueryString:this.identifyLink.hasQueryString),this.main(this.tempHtml),this.dataLoaded=!0)}main(t){if(this.hasLiteral||(t=t.replace(/(\r\n\t|\r\n|\n|\r\t)/gm," ")),this.text=t,t.length>this.number){this.truncated=!0;const i=new h(this.number);if(this.completeWord)t=i.cut(t);else{t=t.substring(0,this.number);const i=this.text.split(" ")[t.split(" ").length-1];this.truncatedWord.model=this.reviewTruncatedWordHasLink(i),this.truncatedWord.index=t.split(" ").length-1}}this.processModels=this.generateModels();const i=this.callOnceClasses(),e=t.split(" "),n=this.text.split(" "),s=this.createWordModelFromString(e),o=this.createWordModelFromString(n),r=this.proccessOnWordModels(s,i),l=this.proccessOnWordModels(o,i);if(r.length){if(this.remainText=r.map(t=>t.html?t.html:t.word).join(" ")+" ... ",!this.completeWord){const t=r.pop();if(t&&this.truncatedWord.model.type.includes("link")){const i=this.truncatedWord.model.word;this.remainText=this.remainText.replace(new RegExp(`<a href=${t.word} `),`<a href=${i} `)}}}else this.remainText=t+" ... ";l.length?this.fullText=l.map(t=>t.html?t.html:t.word).join(" "):this.fullText=this.text,this.truncated?this.initialText(this.remainText,this.more):this.initialText(this.fullText),this.hasLiteral&&(this.style.whiteSpace="pre-line")}callOnceClasses(){const t=[];for(const i of this.processModels)t.push(new i.model(this.config));return t}reviewTruncatedWordHasLink(t){return new o(this.config).process(new s(t))}proccessOnWordModels(t,i){for(let e of t)for(const t of i)0!=e.length&&(e=t.process(e));return t}createWordModelFromString(t){const i=[],e=new c(this.config);for(const n of t)i.push(e.process(n));return i}generateModels(){var t,i,e;const n=[];return(null===(t=this.config.highlightList)||void 0===t?void 0:t.length)&&n.push({model:a}),(null===(i=this.config.identifyLink)||void 0===i?void 0:i.enabled)&&n.push({model:o}),this.config.hashtag&&n.push({model:l}),this.config.mention&&n.push({model:r}),(null===(e=this.userModels)||void 0===e?void 0:e.length)&&this.userModels.forEach(t=>{n.push(t)}),n}initialText(t,i){if(i){const e=this.createSpan(i);this.innerHTML=t,this.appendChild(e)}else this.innerHTML=t}showText(t,i){this.truncated=!this.truncated;const e=this.createSpan(this.truncated?this.more:this.less);this.innerHTML=t,this.hasLiteral&&(this.style.whiteSpace="pre-line"),i.stopPropagation(),this.appendChild(e)}createSpan(t){const i=document.createElement("span");return i.innerHTML=" "+t,i.style.color="#ff00ff",i.style.cursor="pointer",i.classList.add("toggleText"),i.addEventListener("click",t=>this.showText(this.truncated?this.fullText:this.remainText,t)),i}}customElements.get("truncate-element")||customElements.define("truncate-element",d),e.d(i,"ProccessModel",(function(){return n})),e.d(i,"WordModel",(function(){return s})),e.d(i,"WordCut",(function(){return h})),e.d(i,"Link",(function(){return o})),e.d(i,"Mention",(function(){return r})),e.d(i,"Hashtag",(function(){return l})),e.d(i,"Highlight",(function(){return a})),e.d(i,"NullModel",(function(){return c})),e.d(i,"TruncateElement",(function(){return d}))}])}));