Run results for: Vevet.SplitText & SplitType Comparison / Words & Letters

Run details:

User agent: Mozilla/5.0 (Linux; Android 14; K) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/127.0.6533.103 Mobile Safari/537.36

Browser: Chrome Mobile 127

Operating system: Android

Device Platform: Mobile

Date tested: 2 months ago

Test name	Executions per second
Vevet.SplitText	1292.9 Ops/sec
SplitType	541.4 Ops/sec

HTML Preparation code:

<p id="split-text"> <b>Lorem</b>ipsum dolor <b style="color: red;">sit</b> amet,&nbsp;consectetur adipiscing elit, <span style="color: blue;">sed <b><i>d</i>o</b></span> eius<b>m<i>od</i></b> tempor <i>incididunt ut</i> labore et dolore magna aliqua. <br /> <br /> <button type="button" style="font: inherit; background-color: #ccc;">Ut enim</button> ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

Script Preparation code:

!function(){"use strict";const e=[];function t(t,s,n,r){if(void 0!==r){const e={passive:!1,once:!1};r.once&&(e.once=!0),r.passive&&(e.passive=!0),t.addEventListener(s,n,e)}else t.addEventListener(s,n);const o=`${Math.random()}-${+new Date}`;return e.push({id:o,el:t,target:s,callback:n}),{id:o,remove:i.bind(this,o)}}function i(t){const i=[];for(let s=0,n=e.length;s<n;s++){const n=e[s];n.id===t?n.el.removeEventListener(n.target,n.callback):i.push(n)}}let s=0;class n{get callbacks(){return this._callbacks}constructor(e=!0){this._callbacks=[],e&&this._init()}_init(){}add(e,t,i={}){const n=function(e="id"){return s+=1,`${e}_${s}`}("callback");return this._callbacks.push(Object.assign({id:n,isEnabled:!0,target:e,action:t},i)),{id:n,remove:()=>this.remove(n)}}remove(e){return this._remove(e)}_remove(e,t=!1){let i=!1;return this._callbacks=this._callbacks.filter((({id:s,isProtected:n})=>s!==e||!(!n||t)||(i=!0,!1))),i}_removeAll(){for(;this._callbacks.length>0;)this._remove(this._callbacks[0].id,!0)}turn(e,t=!0){const i=this.get(e);i&&(i.isEnabled=t)}get(e){return this._callbacks.filter((({id:t})=>t===e))[0]||void 0}_callAction({id:e,isEnabled:t,timeout:i,isOnce:s,action:n},r){t&&(function(e,t){let i;0===t?e():i=setTimeout((()=>e()),t)}((()=>n(r)),null!=i?i:0),s&&this._remove(e,!0))}tbt(e,t){this._callbacks.forEach((i=>{i.target===e&&this._callAction(i,t)}))}destroy(){this._removeAll()}}var r,o;function a(){return window.vevetApp}!function(e){e.Desktop="desktop",e.Tablet="tablet",e.Phone="phone"}(r||(r={})),function(e){e.Landscape="landscape",e.Portrait="portrait"}(o||(o={}));class l extends n{get width(){return this._width}get height(){return this._height}get radius(){return Math.sqrt(Math.pow(this.width,2)+Math.pow(this.height,2))/2}get vw(){return this.width/100}get vh(){return this.height/100}get vr(){return this.radius/100}get isLandscape(){return this.width>this.height}get isPortrait(){return this.width<this.height}get isDesktop(){return this.width>a().props.tablet}get isTablet(){return this.width<=a().props.tablet&&this.width>a().props.phone}get isPhone(){return this.width<=a().props.phone}get dpr(){return window.devicePixelRatio}get lowerDesktopDpr(){return a().isDesktop?1:this.dpr}constructor(){super(!1),this._width=0,this._height=0,this._init()}_init(){this._updateValues(),this._setEvents()}_setEvents(){this._resizeListener=t(window,"resize",(()=>{this._resizeTimeout&&(clearTimeout(this._resizeTimeout),this._resizeTimeout=void 0),this._resizeTimeout=setTimeout((()=>{this._onResize(),this._resizeTimeout=void 0}),a().props.resizeDebounce)}))}_updateValues(){const{html:e,props:t}=a(),i="boundingRect"===t.widthDetection?parseFloat(e.getBoundingClientRect().width.toFixed(3)):e.clientWidth;this._width=i,this._height=e.clientHeight,this._updateClassNames(),this._updateCSSVars()}_updateClassNames(){const e=[r.Desktop,r.Tablet,r.Phone];this.isDesktop?this._updateBreakpointClassNames(r.Desktop,e):this.isTablet?this._updateBreakpointClassNames(r.Tablet,e):this._updateBreakpointClassNames(r.Phone,e);const t=[o.Landscape,o.Portrait];this.isLandscape?this._updateBreakpointClassNames(o.Landscape,t):this.isPortrait?this._updateBreakpointClassNames(o.Portrait,t):this._updateBreakpointClassNames("",t)}_updateBreakpointClassNames(e,t){const{html:i,prefix:s}=a();t.forEach((t=>{t===e?i.classList.add(`${s}viewport-${t}`):i.classList.remove(`${s}viewport-${t}`)}))}_updateCSSVars(){const{html:e}=a();e.style.setProperty("--vw",`${this.vw}px`),e.style.setProperty("--vh",`${this.vh}px`),e.style.setProperty("--vr",`${this.vr}px`)}_onResize(){const{_width:e,_height:t}=this;this._updateValues();const{width:i,height:s}=this,n={isWidthChanged:i!==e,isHeightChanged:s!==t,isOrientationChanged:i>s!=e>t};i!==e&&s===t&&this.tbt("widthOnly",n),s!==t&&i===e&&this.tbt("heightOnly",n),i!==e&&s!==t&&this.tbt("both",n),i!==e&&this.tbt("width",n),s!==t&&this.tbt("height",n),this.tbt("any",n)}destroy(){var e;super.destroy(),this._resizeTimeout&&clearTimeout(this._resizeTimeout),null===(e=this._resizeListener)||void 0===e||e.remove()}}class c extends n{get isLoaded(){return this._isLoaded}constructor(){super(!1),this._isLoaded=!1,this._init()}_init(){super._init(),this._setEvents()}_setEvents(){"complete"!==document.readyState?this._loadListener=t(window,"load",(()=>this._handleLoaded())):this._handleLoaded()}_handleLoaded(){const e=a(),{prefix:t}=e;this._isLoaded=!0,e.html.classList.remove(`${t}loading`),e.body.classList.remove(`${t}loading`),e.html.classList.add(`${t}loaded`),this.tbt("loaded",void 0)}onLoad(e){if(!this.isLoaded)return this.add("loaded",e.bind(this));e()}destroy(){var e;super.destroy(),null===(e=this._loadListener)||void 0===e||e.remove()}}var h=function(e,t,i){if(i||2===arguments.length)for(var s,n=0,r=t.length;n<r;n++)!s&&n in t||(s||(s=Array.prototype.slice.call(t,0,n)),s[n]=t[n]);return e.concat(s||Array.prototype.slice.call(t))},d=function(e,t,i){this.name=e,this.version=t,this.os=i,this.type="browser"},p=function(e){this.version=e,this.type="node",this.name="node",this.os=process.platform},u=function(e,t,i,s){this.name=e,this.version=t,this.os=i,this.bot=s,this.type="bot-device"},f=function(){this.type="bot",this.bot=!0,this.name="bot",this.version=null,this.os=null},m=function(){this.type="react-native",this.name="react-native",this.version=null,this.os=null},v=/(nuhk|curl|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask\ Jeeves\/Teoma|ia_archiver)/,g=3,b=[["aol",/AOLShield\/([0-9\._]+)/],["edge",/Edge\/([0-9\._]+)/],["edge-ios",/EdgiOS\/([0-9\._]+)/],["yandexbrowser",/YaBrowser\/([0-9\._]+)/],["kakaotalk",/KAKAOTALK\s([0-9\.]+)/],["samsung",/SamsungBrowser\/([0-9\.]+)/],["silk",/\bSilk\/([0-9._-]+)\b/],["miui",/MiuiBrowser\/([0-9\.]+)$/],["beaker",/BeakerBrowser\/([0-9\.]+)/],["edge-chromium",/EdgA?\/([0-9\.]+)/],["chromium-webview",/(?!Chrom.*OPR)wv\).*Chrom(?:e|ium)\/([0-9\.]+)(:?\s|$)/],["chrome",/(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9\.]+)(:?\s|$)/],["phantomjs",/PhantomJS\/([0-9\.]+)(:?\s|$)/],["crios",/CriOS\/([0-9\.]+)(:?\s|$)/],["firefox",/Firefox\/([0-9\.]+)(?:\s|$)/],["fxios",/FxiOS\/([0-9\.]+)/],["opera-mini",/Opera Mini.*Version\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)(?:\s|$)/],["opera",/OPR\/([0-9\.]+)(:?\s|$)/],["pie",/^Microsoft Pocket Internet Explorer\/(\d+\.\d+)$/],["pie",/^Mozilla\/\d\.\d+\s\(compatible;\s(?:MSP?IE|MSInternet Explorer) (\d+\.\d+);.*Windows CE.*\)$/],["netfront",/^Mozilla\/\d\.\d+.*NetFront\/(\d.\d)/],["ie",/Trident\/7\.0.*rv\:([0-9\.]+).*\).*Gecko$/],["ie",/MSIE\s([0-9\.]+);.*Trident\/[4-7].0/],["ie",/MSIE\s(7\.0)/],["bb10",/BB10;\sTouch.*Version\/([0-9\.]+)/],["android",/Android\s([0-9\.]+)/],["ios",/Version\/([0-9\._]+).*Mobile.*Safari.*/],["safari",/Version\/([0-9\._]+).*Safari/],["facebook",/FB[AS]V\/([0-9\.]+)/],["instagram",/Instagram\s([0-9\.]+)/],["ios-webview",/AppleWebKit\/([0-9\.]+).*Mobile/],["ios-webview",/AppleWebKit\/([0-9\.]+).*Gecko\)$/],["curl",/^curl\/([0-9\.]+)$/],["searchbot",/alexa|bot|crawl(er|ing)|facebookexternalhit|feedburner|google web preview|nagios|postrank|pingdom|slurp|spider|yahoo!|yandex/]],w=[["iOS",/iP(hone|od|ad)/],["Android OS",/Android/],["BlackBerry OS",/BlackBerry|BB10/],["Windows Mobile",/IEMobile/],["Amazon OS",/Kindle/],["Windows 3.11",/Win16/],["Windows 95",/(Windows 95)|(Win95)|(Windows_95)/],["Windows 98",/(Windows 98)|(Win98)/],["Windows 2000",/(Windows NT 5.0)|(Windows 2000)/],["Windows XP",/(Windows NT 5.1)|(Windows XP)/],["Windows Server 2003",/(Windows NT 5.2)/],["Windows Vista",/(Windows NT 6.0)/],["Windows 7",/(Windows NT 6.1)/],["Windows 8",/(Windows NT 6.2)/],["Windows 8.1",/(Windows NT 6.3)/],["Windows 10",/(Windows NT 10.0)/],["Windows ME",/Windows ME/],["Windows CE",/Windows CE|WinCE|Microsoft Pocket Internet Explorer/],["Open BSD",/OpenBSD/],["Sun OS",/SunOS/],["Chrome OS",/CrOS/],["Linux",/(Linux)|(X11)/],["Mac OS",/(Mac_PowerPC)|(Macintosh)/],["QNX",/QNX/],["BeOS",/BeOS/],["OS/2",/OS\/2/]];function y(e){var t=function(e){return""!==e&&b.reduce((function(t,i){var s=i[0],n=i[1];if(t)return t;var r=n.exec(e);return!!r&&[s,r]}),!1)}(e);if(!t)return null;var i=t[0],s=t[1];if("searchbot"===i)return new f;var n=s[1]&&s[1].split(".").join("_").split("_").slice(0,3);n?n.length<g&&(n=h(h([],n,!0),function(e){for(var t=[],i=0;i<e;i++)t.push("0");return t}(g-n.length),!0)):n=[];var r=n.join("."),o=function(e){for(var t=0,i=w.length;t<i;t++){var s=w[t],n=s[0];if(s[1].exec(e))return n}return null}(e),a=v.exec(e);return a&&a[1]?new u(i,r,o,a[1]):new d(i,r,o)}var _=/iPhone/i,O=/iPod/i,k=/iPad/i,E=/\biOS-universal(?:.+)Mac\b/i,C=/\bAndroid(?:.+)Mobile\b/i,S=/Android/i,P=/(?:SD4930UR|\bSilk(?:.+)Mobile\b)/i,T=/Silk/i,N=/Windows Phone/i,j=/\bWindows(?:.+)ARM\b/i,A=/BlackBerry/i,x=/BB10/i,L=/Opera Mini/i,W=/\b(CriOS|Chrome)(?:.+)Mobile/i,M=/Mobile(?:.+)Firefox\b/i,B=function(e){return void 0!==e&&"MacIntel"===e.platform&&"number"==typeof e.maxTouchPoints&&e.maxTouchPoints>1&&"undefined"==typeof MSStream};function D(){var e;const t=i?y(i):"undefined"==typeof document&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product?new m:"undefined"!=typeof navigator?y(navigator.userAgent):"undefined"!=typeof process&&process.version?new p(process.version.slice(1)):null;var i;return{osName:null===(e=(null==t?void 0:t.os)||"")||void 0===e?void 0:e.split(" ")[0].toLowerCase(),browserName:((null==t?void 0:t.name)||"").toLowerCase(),device:function(e){var t={userAgent:"",platform:"",maxTouchPoints:0};"undefined"==typeof navigator||(t={userAgent:navigator.userAgent,platform:navigator.platform,maxTouchPoints:navigator.maxTouchPoints||0});var i=t.userAgent,s=i.split("[FBAN");void 0!==s[1]&&(i=s[0]),void 0!==(s=i.split("Twitter"))[1]&&(i=s[0]);var n=function(e){return function(t){return t.test(e)}}(i),r={apple:{phone:n(_)&&!n(N),ipod:n(O),tablet:!n(_)&&(n(k)||B(t))&&!n(N),universal:n(E),device:(n(_)||n(O)||n(k)||n(E)||B(t))&&!n(N)},amazon:{phone:n(P),tablet:!n(P)&&n(T),device:n(P)||n(T)},android:{phone:!n(N)&&n(P)||!n(N)&&n(C),tablet:!n(N)&&!n(P)&&!n(C)&&(n(T)||n(S)),device:!n(N)&&(n(P)||n(T)||n(C)||n(S))||n(/\bokhttp\b/i)},windows:{phone:n(N),tablet:n(j),device:n(N)||n(j)},other:{blackberry:n(A),blackberry10:n(x),opera:n(L),firefox:n(M),chrome:n(W),device:n(A)||n(x)||n(L)||n(M)||n(W)},any:!1,phone:!1,tablet:!1};return r.any=r.apple.device||r.android.device||r.windows.device||r.other.device,r.phone=r.apple.phone||r.android.phone||r.windows.phone,r.tablet=r.apple.tablet||r.android.tablet||r.windows.tablet,r}()}}var R,$,z,I,V,F,H,X,K=(R=function(e,t){return R=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])},R(e,t)},function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function i(){this.constructor=e}R(e,t),e.prototype=null===t?Object.create(t):(i.prototype=t.prototype,new i)}),Q=function(e,t,i,s,n){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?n.call(e,i):n?n.value=i:t.set(e,i),i},U=function(e,t,i,s){if("a"===i&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?s:"a"===i?s.call(e):s?s.value:t.get(e)},q=function(e){function t(t){var i=e.call(this,t||"Promise was canceled")||this;return i.name="CancelError",i}return K(t,e),Object.defineProperty(t.prototype,"isCanceled",{get:function(){return!0},enumerable:!1,configurable:!0}),t}(Error),G=Object.freeze({pending:Symbol("pending"),canceled:Symbol("canceled"),resolved:Symbol("resolved"),rejected:Symbol("rejected")}),J=function(){function e(e){var t=this;$.add(this),z.set(this,[]),I.set(this,!0),V.set(this,G.pending),F.set(this,void 0),H.set(this,void 0),Q(this,F,new Promise((function(i,s){Q(t,H,s,"f");var n=function(e){if(U(t,V,"f")!==G.pending)throw new Error("The `onCancel` handler was attached after the promise ".concat(U(t,V,"f").description,"."));U(t,z,"f").push(e)};Object.defineProperties(n,{shouldReject:{get:function(){return U(t,I,"f")},set:function(e){Q(t,I,e,"f")}}}),e((function(e){U(t,V,"f")===G.canceled&&n.shouldReject||(i(e),U(t,$,"m",X).call(t,G.resolved))}),(function(e){U(t,V,"f")===G.canceled&&n.shouldReject||(s(e),U(t,$,"m",X).call(t,G.rejected))}),n)})),"f")}return e.fn=function(t){return function(){for(var i=[],s=0;s<arguments.length;s++)i[s]=arguments[s];return new e((function(e,s,n){i.push(n),t.apply(void 0,i).then(e,s)}))}},e.prototype.then=function(e,t){return U(this,F,"f").then(e,t)},e.prototype.catch=function(e){return U(this,F,"f").catch(e)},e.prototype.finally=function(e){return U(this,F,"f").finally(e)},e.prototype.cancel=function(e){if(U(this,V,"f")===G.pending){if(U(this,$,"m",X).call(this,G.canceled),U(this,z,"f").length>0)try{for(var t=0,i=U(this,z,"f");t<i.length;t++)(0,i[t])()}catch(e){return void U(this,H,"f").call(this,e)}U(this,I,"f")&&U(this,H,"f").call(this,new q(e))}},Object.defineProperty(e.prototype,"isCanceled",{get:function(){return U(this,V,"f")===G.canceled},enumerable:!1,configurable:!0}),e}(),Y=J;function Z(e,t){if(e instanceof Window)return e;if((i=e)instanceof HTMLElement||i instanceof Element)return e;var i;if(void 0!==t){const i=Z(t);if(i)return i.querySelector(e)}return document.querySelector(e)}z=new WeakMap,I=new WeakMap,V=new WeakMap,F=new WeakMap,H=new WeakMap,$=new WeakSet,X=function(e){U(this,V,"f")===G.pending&&Q(this,V,e,"f")},Object.setPrototypeOf(J.prototype,Promise.prototype);class ee{get props(){return this._props}constructor(e,t=(()=>{}),i="Responsive Props"){this._initProps=e,this._onMutate=t,this._name=i,this._responsiveRules=[],this._refProps=Object.assign({},e),this._props=Object.assign({},e),this._activeBreakpoints=[]}addResponsiveProps(e){this._responsiveRules.push(e),this._responseProps(),void 0===this._viewportCallback&&(this._viewportCallback=a().viewport.add("width",this._responseProps.bind(this),{name:this._name}))}_responseProps(){const e=a(),{viewport:t}=e;let i=!1;const s=Object.assign({},this._refProps),n=[...this._activeBreakpoints].join("_");this._activeBreakpoints=[],this._responsiveRules.forEach((({settings:n,breakpoint:r})=>{"number"==typeof r?t.width<=r&&(this._activeBreakpoints.push(r),i=Object.assign(Object.assign({},s),n)):"string"==typeof r&&(("viewport_desktop"===r&&t.isDesktop||"viewport_tablet"===r&&t.isTablet||"viewport_phone"===r&&t.isPhone)&&(this._activeBreakpoints.push(r),i=Object.assign(Object.assign({},i||s),n)),("device_phone"===r&&e.isPhone||"device_tablet"===r&&e.isTablet||"device_mobile"===r&&e.isMobile)&&(this._activeBreakpoints.push(r),i=Object.assign(Object.assign({},i||s),n)))}));const r=this._activeBreakpoints.join("_")!==n;this._props=i?Object.assign(Object.assign({},this._props),i):Object.assign(Object.assign({},this._props),this._refProps),r&&this._onMutate()}changeProps(e){this._props=Object.assign(Object.assign({},this._props),e),this._refProps=Object.assign(Object.assign({},this._refProps),e),this._onMutate()}destroy(){this._viewportCallback&&this._viewportCallback.remove()}}class te{_getDefaultProps(){return{}}get props(){return this._mutableProps.props}get callbacks(){return this._callbacks}get name(){return this.constructor.name}get prefix(){return""}get isInitialized(){return this._isInitialized}get isDestroyed(){return this._isDestroyed}constructor(e,t=!0){if(this._isInitialized=!1,this._isDestroyed=!1,!a())throw new Error('Vevet.Application does not exist yet. Call "new Vevet.Application()" before using all the stuff');this._callbacks=new n,this._listeners=[],this._destroyableActions=[],this._classNamesToRemove=[];const i=Object.assign(Object.assign({},this._getDefaultProps()),e||{});this._mutableProps=new ee(i,(()=>this._onPropsMutate()),this.name),t&&this.init()}addResponsiveProps(e){if(this.isInitialized)throw new Error("Responsive properties cannot be added after `init` is called");this._mutableProps.addResponsiveProps(e)}changeProps(e){this.isDestroyed||(this._mutableProps.changeProps(e),this._callbacks.tbt("propsChange",void 0))}_onPropsMutate(){this._callbacks.tbt("propsMutate",void 0)}init(){this.isInitialized||(this._isInitialized=!0,this._init())}_init(){}addDestroyableAction(e){this._destroyableActions.push(e)}addViewportCallback(e,t,i={}){const s=a().viewport.add(e,t,Object.assign(Object.assign({},i),{name:this.constructor.name}));this.addDestroyableAction((()=>s.remove()))}addCallback(e,t,i={}){return this.callbacks.add(e,t,i)}addEventListener(e,i,s,n){const r=t(e,i,s,n);return this._listeners.push(r),Object.assign(Object.assign({},r),{remove:()=>(this._listeners=this._listeners.filter((e=>e.id!==r.id)),r.remove())})}className(...e){return e.map((e=>`${this.prefix}${e}`)).join(" ")}toggleClassName(e,t,i){const s=e.classList.contains(t);e.classList.toggle(t,i),s||this._classNamesToRemove.push({element:e,className:t})}destroy(){this.isDestroyed||this._destroy()}_destroy(){this._callbacks.tbt("destroy",void 0),this._callbacks.destroy(),this._mutableProps.destroy(),this._destroyableActions.forEach((e=>e())),this._listeners.forEach((e=>e.remove())),this._classNamesToRemove.forEach((({element:e,className:t})=>e.classList.remove(t))),this._isDestroyed=!0}}class ie extends te{addPlugin(e){void 0===this._plugins&&(this._plugins=[]),this._plugins.push(e),e.component=this,e.init()}_destroyPlugins(){var e;null===(e=this._plugins)||void 0===e||e.forEach((e=>e.destroy()))}_destroy(){super._destroy(),this._destroyPlugins()}}function se(e,t){return ne(e,t)}function ne(e,t){return e===t||null!==e&&ne(e.parentNode,t)}function re(e,t){var i;return(null==e?void 0:e.parentElement)===t?e:re(null!==(i=null==e?void 0:e.parentElement)&&void 0!==i?i:null,t)}function oe({container:e,words:t,className:i,tagName:s}){const n=[];let r=-1,o=1/0;t.forEach((t=>{var a;const l=Math.round(t.element.getBoundingClientRect().top),c=re(t.element,e);if(l!==o){o=l,r+=1;const e=document.createElement(s);e.style.display="block",e.classList.add(i),n[r]={element:e,nodes:[],words:[]}}const h=n[r];n.find((({nodes:e})=>e.includes(c)))||(h.nodes.push(c),3===(null===(a=c.nextSibling)||void 0===a?void 0:a.nodeType)&&h.nodes.push(c.nextSibling))})),n.forEach((t=>{e.insertBefore(t.element,t.nodes[0]),t.element.append(...t.nodes)}));const a=[];return n.forEach((e=>{const t=e.element.nextElementSibling;t instanceof HTMLBRElement&&(t.style.display="none",a.push(t))})),n.forEach((e=>{e.words.push(...t.filter((t=>se(t.element,e.element))))})),{lines:n,destroy:()=>{a.forEach((e=>{e.style.display=""})),n.forEach((t=>{t.nodes.forEach((i=>{e.insertBefore(i,t.element)})),t.element.remove()}))}}}function ae(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}function le(e,t,i){return t&&ae(e.prototype,t),i&&ae(e,i),e}function ce(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function he(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,s)}return i}function de(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?he(Object(i),!0).forEach((function(t){ce(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):he(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function pe(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var i=[],s=!0,n=!1,r=void 0;try{for(var o,a=e[Symbol.iterator]();!(s=(o=a.next()).done)&&(i.push(o.value),!t||i.length!==t);s=!0);}catch(e){n=!0,r=e}finally{try{s||null==a.return||a.return()}finally{if(n)throw r}}return i}}(e,t)||fe(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ue(e){return function(e){if(Array.isArray(e))return me(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||fe(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function fe(e,t){if(e){if("string"==typeof e)return me(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?me(e,t):void 0}}function me(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,s=new Array(t);i<t;i++)s[i]=e[i];return s}function ve(e,t){return Object.getOwnPropertyNames(Object(e)).reduce((function(i,s){var n=Object.getOwnPropertyDescriptor(Object(e),s),r=Object.getOwnPropertyDescriptor(Object(t),s);return Object.defineProperty(i,s,r||n)}),{})}function ge(e){return"string"==typeof e}function be(e){return Array.isArray(e)}function we(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=ve(t);return void 0!==i.types?e=i.types:void 0!==i.split&&(e=i.split),void 0!==e&&(i.types=(ge(e)||be(e)?String(e):"").split(",").map((function(e){return String(e).trim()})).filter((function(e){return/((line)|(word)|(char))/i.test(e)}))),(i.absolute||i.position)&&(i.absolute=i.absolute||/absolute/.test(t.position)),i}function ye(e){var t=ge(e)||be(e)?String(e):"";return{none:!t,lines:/line/i.test(t),words:/word/i.test(t),chars:/char/i.test(t)}}function _e(e){return null!==e&&"object"==typeof e}function Oe(e){return _e(e)&&/^(1|3|11)$/.test(e.nodeType)}function ke(e){return be(e)?e:null==e?[]:function(e){return _e(e)&&function(e){return"number"==typeof e&&e>-1&&e%1==0}(e.length)}(e)?Array.prototype.slice.call(e):[e]}function Ee(e){var t=e;return ge(e)&&(t=/^(#[a-z]\w+)$/.test(e.trim())?document.getElementById(e.trim().slice(1)):document.querySelectorAll(e)),ke(t).reduce((function(e,t){return[].concat(ue(e),ue(ke(t).filter(Oe)))}),[])}!function(){function e(){for(var e=arguments.length,t=0;t<e;t++){var i=t<0||arguments.length<=t?void 0:arguments[t];1===i.nodeType||11===i.nodeType?this.appendChild(i):this.appendChild(document.createTextNode(String(i)))}}function t(){for(;this.lastChild;)this.removeChild(this.lastChild);arguments.length&&this.append.apply(this,arguments)}function i(){for(var e=this.parentNode,t=arguments.length,i=new Array(t),s=0;s<t;s++)i[s]=arguments[s];var n=i.length;if(e)for(n||e.removeChild(this);n--;){var r=i[n];"object"!=typeof r?r=this.ownerDocument.createTextNode(r):r.parentNode&&r.parentNode.removeChild(r),n?e.insertBefore(this.previousSibling,r):e.replaceChild(r,this)}}"undefined"!=typeof Element&&(Element.prototype.append||(Element.prototype.append=e,DocumentFragment.prototype.append=e),Element.prototype.replaceChildren||(Element.prototype.replaceChildren=t,DocumentFragment.prototype.replaceChildren=t),Element.prototype.replaceWith||(Element.prototype.replaceWith=i,DocumentFragment.prototype.replaceWith=i))}();var Ce=Object.entries,Se="_splittype",Pe={},Te=0;function Ne(e,t,i){if(!_e(e))return console.warn("[data.set] owner is not an object"),null;var s=e[Se]||(e[Se]=++Te),n=Pe[s]||(Pe[s]={});return void 0===i?t&&Object.getPrototypeOf(t)===Object.prototype&&(Pe[s]=de(de({},n),t)):void 0!==t&&(n[t]=i),i}function je(e,t){var i=_e(e)?e[Se]:null,s=i&&Pe[i]||{};return void 0===t?s:s[t]}function Ae(e){var t=e&&e[Se];t&&(delete e[t],delete Pe[t])}var xe="\\ud800-\\udfff",Le="\\u0300-\\u036f\\ufe20-\\ufe23",We="\\u20d0-\\u20f0",Me="\\ufe0e\\ufe0f",Be="[".concat(xe,"]"),De="[".concat(Le).concat(We,"]"),Re="\\ud83c[\\udffb-\\udfff]",$e="(?:".concat(De,"|").concat(Re,")"),ze="[^".concat(xe,"]"),Ie="(?:\\ud83c[\\udde6-\\uddff]){2}",Ve="[\\ud800-\\udbff][\\udc00-\\udfff]",Fe="\\u200d",He="".concat($e,"?"),Xe="[".concat(Me,"]?"),Ke=Xe+He+"(?:"+Fe+"(?:"+[ze,Ie,Ve].join("|")+")"+Xe+He+")*",Qe="(?:".concat(["".concat(ze).concat(De,"?"),De,Ie,Ve,Be].join("|"),"\n)"),Ue=RegExp("".concat(Re,"(?=").concat(Re,")|").concat(Qe).concat(Ke),"g"),qe=RegExp("[".concat([Fe,xe,Le,We,Me].join(""),"]"));function Ge(e){return qe.test(e)}function Je(e){var t,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return(e=null==(t=e)?"":String(t))&&ge(e)&&!i&&Ge(e)?function(e){return Ge(e)?function(e){return e.match(Ue)||[]}(e):function(e){return e.split("")}(e)}(e):e.split(i)}function Ye(e,t){var i=document.createElement(e);return t?(Object.keys(t).forEach((function(e){var s=t[e],n=ge(s)?s.trim():s;null!==n&&""!==n&&("children"===e?i.append.apply(i,ue(ke(n))):i.setAttribute(e,n))})),i):i}var Ze={splitClass:"",lineClass:"line",wordClass:"word",charClass:"char",types:["lines","words","chars"],absolute:!1,tagName:"div"};function et(e,t){var i=e.nodeType,s={words:[],chars:[]};if(!/(1|3|11)/.test(i))return s;if(3===i&&/\S/.test(e.nodeValue))return function(e,t){var i,s=ye((t=ve(Ze,t)).types),n=t.tagName,r=e.nodeValue,o=document.createDocumentFragment(),a=[];return/^\s/.test(r)&&o.append(" "),i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:" ";return(e?String(e):"").trim().replace(/\s+/g," ").split(t)}(r).reduce((function(e,i,r,l){var c,h;return s.chars&&(h=Je(i).map((function(e){var i=Ye(n,{class:"".concat(t.splitClass," ").concat(t.charClass),style:"display: inline-block;",children:e});return Ne(i,"isChar",!0),a=[].concat(ue(a),[i]),i}))),s.words||s.lines?(Ne(c=Ye(n,{class:"".concat(t.wordClass," ").concat(t.splitClass),style:"display: inline-block; ".concat(s.words&&t.absolute?"position: relative;":""),children:s.chars?h:i}),{isWord:!0,isWordStart:!0,isWordEnd:!0}),o.appendChild(c)):h.forEach((function(e){o.appendChild(e)})),r<l.length-1&&o.append(" "),s.words?e.concat(c):e}),[]),/\s$/.test(r)&&o.append(" "),e.replaceWith(o),{words:i,chars:a}}(e,t);var n=ke(e.childNodes);if(n.length&&(Ne(e,"isSplit",!0),!je(e).isRoot)){e.style.display="inline-block",e.style.position="relative";var r=e.nextSibling,o=e.previousSibling,a=e.textContent||"",l=r?r.textContent:" ",c=o?o.textContent:" ";Ne(e,{isWordEnd:/\s$/.test(a)||/^\s/.test(l),isWordStart:/^\s/.test(a)||/\s$/.test(c)})}return n.reduce((function(e,i){var s=et(i,t),n=s.words,r=s.chars;return{words:[].concat(ue(e.words),ue(n)),chars:[].concat(ue(e.chars),ue(r))}}),s)}function tt(e){je(e).isWord?(Ae(e),e.replaceWith.apply(e,ue(e.childNodes))):ke(e.children).forEach((function(e){return tt(e)}))}function it(e,t,i){var s,n,r,o=ye(t.types),a=t.tagName,l=e.getElementsByTagName("*"),c=[],h=[],d=null,p=[],u=e.parentElement,f=e.nextElementSibling,m=document.createDocumentFragment(),v=window.getComputedStyle(e),g=v.textAlign,b=.2*parseFloat(v.fontSize);return t.absolute&&(r={left:e.offsetLeft,top:e.offsetTop,width:e.offsetWidth},n=e.offsetWidth,s=e.offsetHeight,Ne(e,{cssWidth:e.style.width,cssHeight:e.style.height})),ke(l).forEach((function(s){var n=s.parentElement===e,r=function(e,t,i,s){if(!i.absolute)return{top:t?e.offsetTop:null};var n=e.offsetParent,r=pe(s,2),o=r[0],a=r[1],l=0,c=0;if(n&&n!==document.body){var h=n.getBoundingClientRect();l=h.x+o,c=h.y+a}var d=e.getBoundingClientRect(),p=d.width,u=d.height,f=d.x;return{width:p,height:u,top:d.y+a-c,left:f+o-l}}(s,n,t,i),a=r.width,l=r.height,p=r.top,u=r.left;/^br$/i.test(s.nodeName)||(o.lines&&n&&((null===d||p-d>=b)&&(d=p,c.push(h=[])),h.push(s)),t.absolute&&Ne(s,{top:p,left:u,width:a,height:l}))})),u&&u.removeChild(e),o.lines&&(p=c.map((function(e){var i=Ye(a,{class:"".concat(t.splitClass," ").concat(t.lineClass),style:"display: block; text-align: ".concat(g,"; width: 100%;")});Ne(i,"isLine",!0);var s={height:0,top:1e4};return m.appendChild(i),e.forEach((function(e,t,n){var r=je(e),o=r.isWordEnd,a=r.top,l=r.height,c=n[t+1];s.height=Math.max(s.height,l),s.top=Math.min(s.top,a),i.appendChild(e),o&&je(c).isWordStart&&i.append(" ")})),t.absolute&&Ne(i,{height:s.height,top:s.top}),i})),o.words||tt(m),e.replaceChildren(m)),t.absolute&&(e.style.width="".concat(e.style.width||n,"px"),e.style.height="".concat(s,"px"),ke(l).forEach((function(e){var t=je(e),i=t.isLine,s=t.top,n=t.left,o=t.width,a=t.height,l=je(e.parentElement),c=!i&&l.isLine;e.style.top="".concat(c?s-l.top:s,"px"),e.style.left="".concat(i?r.left:n-(c?r.left:0),"px"),e.style.height="".concat(a,"px"),e.style.width="".concat(i?r.width:o,"px"),e.style.position="absolute"}))),u&&(f?u.insertBefore(e,f):u.appendChild(e)),p}var st=ve(Ze,{}),nt=function(){function e(t,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.isSplit=!1,this.settings=ve(st,we(i)),this.elements=Ee(t),this.split()}return le(e,null,[{key:"clearData",value:function(){Object.keys(Pe).forEach((function(e){delete Pe[e]}))}},{key:"setDefaults",value:function(e){return st=ve(st,we(e)),Ze}},{key:"revert",value:function(e){Ee(e).forEach((function(e){var t=je(e),i=t.isSplit,s=t.html,n=t.cssWidth,r=t.cssHeight;i&&(e.innerHTML=s,e.style.width=n||"",e.style.height=r||"",Ae(e))}))}},{key:"create",value:function(t,i){return new e(t,i)}},{key:"data",get:function(){return Pe}},{key:"defaults",get:function(){return st},set:function(e){st=ve(st,we(e))}}]),le(e,[{key:"split",value:function(e){var t=this;this.revert(),this.elements.forEach((function(e){Ne(e,"html",e.innerHTML)})),this.lines=[],this.words=[],this.chars=[];var i=[window.pageXOffset,window.pageYOffset];void 0!==e&&(this.settings=ve(this.settings,we(e)));var s=ye(this.settings.types);s.none||(this.elements.forEach((function(e){Ne(e,"isRoot",!0);var i=et(e,t.settings),s=i.words,n=i.chars;t.words=[].concat(ue(t.words),ue(s)),t.chars=[].concat(ue(t.chars),ue(n))})),this.elements.forEach((function(e){if(s.lines||t.settings.absolute){var n=it(e,t.settings,i);t.lines=[].concat(ue(t.lines),ue(n))}})),this.isSplit=!0,window.scrollTo(i[0],i[1]),Ce(Pe).forEach((function(e){var t=pe(e,2),i=t[0],s=t[1],n=s.isRoot,r=s.isSplit;n&&r||(Pe[i]=null,delete Pe[i])})))}},{key:"revert",value:function(){this.isSplit&&(this.lines=null,this.words=null,this.chars=null,this.isSplit=!1),e.revert(this.elements)}}]),e}(),rt=new class{get version(){return"3.14.0"}get props(){return this._props}get defaultProps(){return{tablet:1199,phone:899,prefix:"v-",easing:[.25,.1,.25,1],resizeDebounce:16,shouldCheckWebpSupport:!0,widthDetection:"boundingRect"}}get prefix(){return this._props.prefix}get isPhone(){return this._isPhone}get isTablet(){return this._isTablet}get isMobile(){return this._isMobile}get isDesktop(){return this._isDesktop}get osName(){return this._osName}get browserName(){return this._browserName}get isWebpSupported(){return this._isWebpSupported}get pageLoad(){return this._pageLoad}get viewport(){return this._viewport}constructor(e={}){if(window.vevetApp)throw new Error("Vevet Application already exists!");this._props=Object.assign(Object.assign({},this.defaultProps),e),this._isWebpSupported=!1,this._setDeviceFeatures(),window.vevetApp=this,this._pageLoad=new c,this._viewport=new l}_setDeviceFeatures(){const{prefix:e,html:t}=this,{osName:i,browserName:s,device:n}=D();t.classList.add(`${e}os-${i}`),this._osName=i,t.classList.add(`${e}browser-${s}`),this._browserName=s,this._isPhone=n.phone,t.classList.toggle(`${e}phone`,this._isPhone),this._isTablet=n.tablet,t.classList.toggle(`${e}tablet`,this._isTablet),this._isMobile=n.phone||n.tablet,t.classList.toggle(`${e}mobile`,this._isMobile),this._isDesktop=!this._isMobile,t.classList.toggle(`${e}desktop`,this._isDesktop),this.props.shouldCheckWebpSupport&&new Y(((e,t)=>{const i=new Image;i.onload=()=>{1===i.width?e():t()},i.onerror=t,i.src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA="})).then((()=>{this._isWebpSupported=!0})).catch((()=>{}))}get doc(){return document}get html(){return document.documentElement}get body(){return document.body}onPageLoad(){return new Y((e=>this._pageLoad.onLoad(e)))}};window.vevetApp=rt,window.VevetSplitText=class extends ie{_getDefaultProps(){return Object.assign(Object.assign({},super._getDefaultProps()),{container:`#${this.prefix}`,hasLetters:!0,hasLines:!1,letterTag:"span",wordTag:"span",lineTag:"span",viewportTarget:"any",resizeDebounce:0})}get prefix(){return`${a().prefix}split-text`}get letterClassName(){return this.className("__letter")}get wordClassName(){return this.className("__word")}get lineClassName(){return this.className("__line")}get container(){return this._container}get letters(){return this._letters}get words(){return this._words}get lines(){return this._lines}constructor(e,t=!0){super(e,!1),this._isBaseSplit=!1,this._container=Z(this.props.container),this.toggleClassName(this._container,this.className(""),!0),this._container.translate=!1,this._initialHTML=this._container.innerHTML,this._letters=[],this._words=[],this._lines=[],t&&this.init()}_init(){super._init(),this._setResize()}_setResize(){const{viewportTarget:e,resizeDebounce:t,hasLines:i}=this.props;if(!i)return void this.splitText();const s=function({onResize:e,element:t,viewportTarget:i="any",hasBothEvents:s=!1,resizeDebounce:n=0}){let r,o,a,l=!0;const c=(t,i)=>{r&&clearTimeout(r),r=setTimeout((()=>e(null!=t?t:{trigger:"unknown"})),null!=i?i:n)};return t&&(t instanceof Element||Array.isArray(t))&&"ResizeObserver"in window&&(o=new ResizeObserver((()=>{l?l=!1:c({trigger:"ResizeObserver"},window.vevetApp.props.resizeDebounce+n)})),Array.isArray(t)?t.forEach((e=>null==o?void 0:o.observe(e))):o.observe(t)),!s&&o||(a=window.vevetApp.viewport.add(i,(()=>c({trigger:"Viewport"})))),{remove:()=>{r&&clearTimeout(r),null==o||o.disconnect(),null==a||a.remove()},resize:()=>e({trigger:"unknown"}),debounceResize:()=>c(),hasResizeObserver:!!o}}({onResize:()=>this.splitText(),element:this.container,viewportTarget:e,resizeDebounce:t});s.resize(),this.addDestroyableAction((()=>s.remove()))}splitText(){this._splitBase(),this.props.hasLines&&this._splitIntoLines(),this.callbacks.tbt("split",void 0)}_splitBase(){if(this._isBaseSplit)return;const{container:e,letterClassName:t,wordClassName:i}=this,{letterTag:s,wordTag:n}=this.props;this._isBaseSplit=!0;const{helper:r,words:o,letters:a}=function({container:e,letterClassName:t,wordClassName:i,hasLetters:s,letterTag:n,wordTag:r}){const o=e.cloneNode(!0),a=function({container:e,classname:t,tagName:i}){const s=String.fromCharCode(32),n=[];return function e(r){var o;if(r instanceof HTMLElement)"BR"!==r.tagName&&(r.style.display="inline-block"),[...Array.from(r.childNodes)].forEach((t=>e(t)));else if(3===r.nodeType){const e=r.parentElement,a=null!==(o=r.nodeValue)&&void 0!==o?o:"",l=a.split(s);if(a===s)return null==e||e.insertBefore(document.createTextNode(s),r),void r.remove();l.forEach(((o,a)=>{if(o){const s=document.createElement(i);s.style.display="inline-block",s.classList.add(t),s.appendChild(document.createTextNode(o)),n.push({element:s,text:o,letters:[]}),null==e||e.insertBefore(s,r)}a<l.length-1&&(null==e||e.insertBefore(document.createTextNode(s),r))})),r.remove()}}(e),n}({container:o,classname:i,tagName:r}),l=[];if(s){const e=function({words:e,classname:t,tagName:i}){const s=[];return e.forEach((e=>{const n=e.element.childNodes[0],r=n.textContent;r&&(r.split("").forEach((n=>{const r=document.createElement(i);r.style.display="inline-block",r.classList.add(t),r.appendChild(document.createTextNode(n)),e.element.appendChild(r);const o={element:r,text:n};e.letters.push(o),s.push(o)})),n.remove())})),{letters:s}}({words:a,classname:t,tagName:n});l.push(...e.letters)}return{helper:o,words:a,letters:l}}({container:e,letterClassName:t,wordClassName:i,hasLetters:this.props.hasLetters,letterTag:s,wordTag:n});for(;e.childNodes[0];)e.childNodes[0].remove();for(;r.childNodes[0];)e.appendChild(r.childNodes[0]);this._words=o,this._letters=a}_splitIntoLines(){var e;const{container:t,words:i,lineClassName:s}=this,{lineTag:n}=this.props;null===(e=this._lineWrapper)||void 0===e||e.destroy(),this._lineWrapper=oe({container:t,words:i,className:s,tagName:n}),this._lines=this._lineWrapper.lines}_destroy(){super._destroy(),this._container.innerHTML=this._initialHTML}},window.SplitType=nt}();

Tests:

Vevet.SplitText
const container = document.getElementById('split-text'); const instance = new window.VevetSplitText({ container, hasLetters: true, hasLines: false }); instance.destroy();
SplitType
const container = document.getElementById('split-text'); const instance = new window.SplitType(container, { types: ['words', 'chars'] }); instance.revert();