PageSourceSearch

https://share-link-highlighted-text.webflow.io/

html share-link-highlighted-text.webflow.io collected 2026-10-03 13:42:48 UTC 22,638 bytes, 356 lines download raw bytes

1<!DOCTYPE html><!-- Last Published: Tue Sep 17 2024 16:11:08 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="share-link-highlighted-text.webflow.io" data-wf-page="66e9903ca2ba912c78a18110" data-wf-site="66e9903ca2ba912c78a1811a"><head><meta charset="utf-8"/><link href="https://cdn.prod.website-files.com" rel="preconnect" crossorigin="anonymous"/><title>Share Link With Highlighted Text</title><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://cdn.prod.website-files.com/66e9903ca2ba912c78a1811a/css/share-link-highlighted-text.62891dc32.css" rel="stylesheet" type="text/css"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/>
1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
1<script type="text/javascript">WebFont.load({  google: {    families: ["DM Sans:100,200,300,regular,500,600,700,800,900","Plus Jakarta Sans:200,300,regular,500,600,700,800","Manrope:200,300,regular,500,600,700,800"]  }});</script>
1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
1<link href="https://cdn.prod.website-files.com/66a0e364c9ecfecfb8386e5d/66a0e364c9ecfecfb8386ee9_fav-icon.png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/66a0e364c9ecfecfb8386e5d/66a0e364c9ecfecfb8386eea_web-clip.png" rel="apple-touch-icon"/><!-- Memberstack webflow package -->
2<script data-memberstack-app="app_cm0l0fjnj00jb0stu4g573kn5" src="https://static.memberstack.com/scripts/v1/memberstack.js" type="text/javascript"></script>
2</head><body><div class="page-wrapper"><div class="global-styles w-embed"><style>
3
4/* Make text look crisper and more legible in all browsers */
5body {
6  -webkit-font-smoothing: antialiased;
7  -moz-osx-font-smoothing: grayscale;
8  font-smoothing: antialiased;
9  text-rendering: optimizeLegibility;
10}
11
12/* Focus state style for keyboard navigation for the focusable elements */
13*[tabindex]:focus-visible,
14  input[type="file"]:focus-visible {
15   outline: 0.125rem solid #4d65ff;
16   outline-offset: 0.125rem;
17}
18
19/* Set color style to inherit */
20.inherit-color * {
21    color: inherit;
22}
23
24/* Get rid of top margin on first element in any rich text element */
25.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
26  margin-top: 0 !important;
27}
28
29/* Get rid of bottom margin on last element in any rich text element */
30.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
31	margin-bottom: 0 !important;
32}
33
34
35/* Make sure containers never lose their center alignment */
36.container-medium,.container-small, .container-large {
37	margin-right: auto !important;
38  margin-left: auto !important;
39}
40
41/* 
42Make the following elements inherit typography styles from the parent and not have hardcoded values. 
43Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
44Uncomment this CSS to use it in the project. Leave this message for future hand-off.
45*/
46/*
47a,
48.w-input,
49.w-select,
50.w-tab-link,
51.w-nav-link,
52.w-dropdown-btn,
53.w-dropdown-toggle,
54.w-dropdown-link {
55  color: inherit;
56  text-decoration: inherit;
57  font-size: inherit;
58}
59*/
60
61/* Apply "..." after 3 lines of text */
62.text-style-3lines {
63	display: -webkit-box;
64	overflow: hidden;
65	-webkit-line-clamp: 3;
66	-webkit-box-orient: vertical;
67}
68
69/* Apply "..." after 2 lines of text */
70.text-style-2lines {
71	display: -webkit-box;
72	overflow: hidden;
73	-webkit-line-clamp: 2;
74	-webkit-box-orient: vertical;
75}
76
77/* These classes are never overwritten */
78.hide {
79  display: none !important;
80}
81
82@media screen and (max-width: 991px) {
83    .hide, .hide-tablet {
84        display: none !important;
85    }
86}
87  @media screen and (max-width: 767px) {
88    .hide-mobile-landscape{
89      display: none !important;
90    }
91}
92  @media screen and (max-width: 479px) {
93    .hide-mobile{
94      display: none !important;
95    }
96}
97 
98.margin-0 {
99  margin: 0rem !important;
100}
101  
102.padding-0 {
103  padding: 0rem !important;
104}
105
106.spacing-clean {
107padding: 0rem !important;
108margin: 0rem !important;
109}
110
111.margin-top {
112  margin-right: 0rem !important;
113  margin-bottom: 0rem !important;
114  margin-left: 0rem !important;
115}
116
117.padding-top {
118  padding-right: 0rem !important;
119  padding-bottom: 0rem !important;
120  padding-left: 0rem !important;
121}
122  
123.margin-right {
124  margin-top: 0rem !important;
125  margin-bottom: 0rem !important;
126  margin-left: 0rem !important;
127}
128
129.padding-right {
130  padding-top: 0rem !important;
131  padding-bottom: 0rem !important;
132  padding-left: 0rem !important;
133}
134
135.margin-bottom {
136  margin-top: 0rem !important;
137  margin-right: 0rem !important;
138  margin-left: 0rem !important;
139}
140
141.padding-bottom {
142  padding-top: 0rem !important;
143  padding-right: 0rem !important;
144  padding-left: 0rem !important;
145}
146
147.margin-left {
148  margin-top: 0rem !important;
149  margin-right: 0rem !important;
150  margin-bottom: 0rem !important;
151}
152  
153.padding-left {
154  padding-top: 0rem !important;
155  padding-right: 0rem !important;
156  padding-bottom: 0rem !important;
157}
158  
159.margin-horizontal {
160  margin-top: 0rem !important;
161  margin-bottom: 0rem !important;
162}
163
164.padding-horizontal {
165  padding-top: 0rem !important;
166  padding-bottom: 0rem !important;
167}
168
169.margin-vertical {
170  margin-right: 0rem !important;
171  margin-left: 0rem !important;
172}
173  
174.padding-vertical {
175  padding-right: 0rem !important;
176  padding-left: 0rem !important;
177}
178</style></div><div class="section_top-bar"><div class="padding-global"><div class="container-large"><div class="top-bar_inner"><img src="https://cdn.prod.website-files.com/66e9903ca2ba912c78a1811a/66e9903ca2ba912c78a18146_memberstacklogo.svg" loading="lazy" alt="" class="intro_logo"/><a href="https://webflow.com/made-in-webflow/website/share-link-highlighted-text" target="_blank" class="button is-icon 
178is-brand is-clone w-inline-block"><div class="clone-icon w-embed"><svg data-wf-icon="DuplicateOutlineIcon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 3C6 2.44772 6.44772 2 7 2H13C13.5523 2 14 2.44772 14 3V9C14 9.55228 13.5523 10 13 10H7C6.44772 10 6 9.55228 6 9V3ZM7 3H13V9H7V3Z" fill="currentColor"></path><path d="M3 5V12C3 12.5523 3.44772 13 4 13H11V12H4V5H3Z" fill="currentColor"></path></svg></div><div>Clone Project</div></a></div></div></div></div><div class="section_intro"><div class="padding-global padding-section-medium"><div class="container-large"><div class="intro_grid"><div class="align-center"><div class="intro_left max-width-large"><div class="intro_subhead">Memberscripts by Memberstack</div><div class="spacer-xsmall"></div><h1 class="heading-style-h2"><span class="intro_number">#116</span> - Share Link With Highlighted Text</h1><div class="spacer-xsmall"></div><p class="text-style-muted text-size-medium">When a user <span class="ms-highlight">highlights</span> some text, a URL parameter will be added. When this URL is shared and clicked, it will automatically highlight the text and then scroll down to make the text in view.</p><div class="spacer-medium"></div><div class="button-group"><a href="https://www.memberstack.com/scripts/share-link-highlighted-text" class="button is-brand w-button">Get the code →</a><a href="#text" class="button w-button">Test it out →</a></div></div></div><div class="intro_video-wrap"><div style="padding-top:56.17021276595745%" class="intro_video w-video w-embed"><iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FkVU4RYGUK7g%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DkVU4RYGUK7g&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FkVU4RYGUK7g%2Fhqdefault.jpg&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=youtube" width="940" height="528" scrolling="no" allowfullscreen title="How To Link To Highlighted Text On ANY Browser (For Webflow Sites)"></iframe></div></div><div class="max-width-large align-center"><div id="text" class="text-rich-text w-richtext"><h3>Highlight some of this text, then copy the link and send it (or just refresh the page)</h3><p>Ipsum dolor et dolor culpa in consectetur ut est qui voluptate quis commodo ad qui aute. Ullamco officia excepteur et voluptate veniam cillum aliqua sit. Irure non cupidatat consequat ut aliquip duis mollit incididunt consectetur incididunt dolore sint. Officia consectetur nisi Lorem do cupidatat consequat reprehenderit irure et voluptate qui dolor. Veniam non ullamco ipsum qui laboris.</p><p>Voluptate pariatur aute laborum voluptate deserunt excepteur culpa in amet ipsum laborum fugiat pariatur cillum. Sunt deserunt ut adipisicing sint. Culpa enim fugiat id amet laboris sint eu proident do nulla culpa incididunt in. Labore Lorem voluptate officia minim. Eu id ex reprehenderit. Deserunt quis occaecat sit officia elit sunt dolor. Magna nostrud ut id amet culpa aliqua pariatur.</p><p>Lorem ullamco exercitation magna ad sit aliqua. Eu nisi magna et voluptate et enim nostrud dolor enim Lorem id commodo amet elit. Excepteur incididunt pariatur duis qui aliqua sint qui velit officia mollit laborum aliqua qui Lorem dolore. Incididunt eu et laborum. Ea enim velit et fugiat ut esse sint officia nisi in ullamco.</p><p>Et ea incididunt elit fugiat veniam sit et mollit velit aliqua est. Sit cillum duis nisi voluptate sit nisi sit commodo cillum reprehenderit. Velit dolore esse voluptate mollit culpa incididunt et exercitation nostrud esse ea ipsum labore. Ullamco nostrud nulla esse quis cupidatat eiusmod sunt occaecat dolore aliquip nostrud non consectetur aute dolore. Non mollit proident ea cillum irure ex proident. Ea quis officia est irure mollit enim. Consectetur culpa laborum ut eiusmod dolor ullamco sint consectetur consectetur ut exercitation et occaecat esse. Labore magna id veniam ad eu commodo in fugiat non occaecat ullamco sunt.</p><p>Cupidatat anim esse ex dolor eiusmod Lorem enim eu non eu sit aliquip ad. Elit amet nulla nostrud dolor anim mollit irure aliqua anim aute dolore adipisicing culpa tempor. Ex fugiat pariatur irure Lorem amet excepteur eu irure in excepteur ullamco amet qui fugiat veniam. Ullamco laboris sunt proident aute exercitation officia cupidatat esse. Incididunt irure ipsum id duis esse dolor consectetur non nulla minim ad culpa ad. Proident nostrud eu eiusmod aute pariatur dolor duis minim est. Aliqua tempor elit id id. Est tempor mollit qui ex aute aute consectetur aute aliquip adipisicing.</p><p>Dolor proident et ex sit nisi ipsum sunt irure dolor reprehenderit aliqua quis amet cillum. Excepteur laborum ea labore dolore do pariatur sit. Quis nulla incididunt nostrud. Lorem cupidatat fugiat aute duis culpa ullamco nisi officia magna aute nostrud cupidatat anim tempor. Velit deserunt enim deserunt duis in exercitation minim id commodo cillum enim.</p><p>Ipsum dolor et dolor culpa in consectetur ut est qui voluptate quis commodo ad qui aute. Ullamco officia excepteur et voluptate veniam cillum al
178iqua sit. Irure non cupidatat consequat ut aliquip duis mollit incididunt consectetur incididunt dolore sint. Officia consectetur nisi Lorem do cupidatat consequat reprehenderit irure et voluptate qui dolor. Veniam non ullamco ipsum qui laboris.</p><p>Voluptate pariatur aute laborum voluptate deserunt excepteur culpa in amet ipsum laborum fugiat pariatur cillum. Sunt deserunt ut adipisicing sint. Culpa enim fugiat id amet laboris sint eu proident do nulla culpa incididunt in. Labore Lorem voluptate officia minim. Eu id ex reprehenderit. Deserunt quis occaecat sit officia elit sunt dolor. Magna nostrud ut id amet culpa aliqua pariatur.</p><p>Lorem ullamco exercitation magna ad sit aliqua. Eu nisi magna et voluptate et enim nostrud dolor enim Lorem id commodo amet elit. Excepteur incididunt pariatur duis qui aliqua sint qui velit officia mollit laborum aliqua qui Lorem dolore. Incididunt eu et laborum. Ea enim velit et fugiat ut esse sint officia nisi in ullamco.</p><p>Et ea incididunt elit fugiat veniam sit et mollit velit aliqua est. Sit cillum duis nisi voluptate sit nisi sit commodo cillum reprehenderit. Velit dolore esse voluptate mollit culpa incididunt et exercitation nostrud esse ea ipsum labore. Ullamco nostrud nulla esse quis cupidatat eiusmod sunt occaecat dolore aliquip nostrud non consectetur aute dolore. Non mollit proident ea cillum irure ex proident. Ea quis officia est irure mollit enim. Consectetur culpa laborum ut eiusmod dolor ullamco sint consectetur consectetur ut exercitation et occaecat esse. Labore magna id veniam ad eu commodo in fugiat non occaecat ullamco sunt.</p><p>Cupidatat anim esse ex dolor eiusmod Lorem enim eu non eu sit aliquip ad. Elit amet nulla nostrud dolor anim mollit irure aliqua anim aute dolore adipisicing culpa tempor. Ex fugiat pariatur irure Lorem amet excepteur eu irure in excepteur ullamco amet qui fugiat veniam. Ullamco laboris sunt proident aute exercitation officia cupidatat esse. Incididunt irure ipsum id duis esse dolor consectetur non nulla minim ad culpa ad. Proident nostrud eu eiusmod aute pariatur dolor duis minim est. Aliqua tempor elit id id. Est tempor mollit qui ex aute aute consectetur aute aliquip adipisicing.</p><p>Dolor proident et ex sit nisi ipsum sunt irure dolor reprehenderit aliqua quis amet cillum. Excepteur laborum ea labore dolore do pariatur sit. Quis nulla incididunt nostrud. Lorem cupidatat fugiat aute duis culpa ullamco nisi officia magna aute nostrud cupidatat anim tempor. Velit deserunt enim deserunt duis in exercitation minim id commodo cillum enim.</p><p>Ipsum dolor et dolor culpa in consectetur ut est qui voluptate quis commodo ad qui aute. Ullamco officia excepteur et voluptate veniam cillum aliqua sit. Irure non cupidatat consequat ut aliquip duis mollit incididunt consectetur incididunt dolore sint. Officia consectetur nisi Lorem do cupidatat consequat reprehenderit irure et voluptate qui dolor. Veniam non ullamco ipsum qui laboris.</p><p>Voluptate pariatur aute laborum voluptate deserunt excepteur culpa in amet ipsum laborum fugiat pariatur cillum. Sunt deserunt ut adipisicing sint. Culpa enim fugiat id amet laboris sint eu proident do nulla culpa incididunt in. Labore Lorem voluptate officia minim. Eu id ex reprehenderit. Deserunt quis occaecat sit officia elit sunt dolor. Magna nostrud ut id amet culpa aliqua pariatur.</p><p>Lorem ullamco exercitation magna ad sit aliqua. Eu nisi magna et voluptate et enim nostrud dolor enim Lorem id commodo amet elit. Excepteur incididunt pariatur duis qui aliqua sint qui velit officia mollit laborum aliqua qui Lorem dolore. Incididunt eu et laborum. Ea enim velit et fugiat ut esse sint officia nisi in ullamco.</p><p>Et ea incididunt elit fugiat veniam sit et mollit velit aliqua est. Sit cillum duis nisi voluptate sit nisi sit commodo cillum reprehenderit. Velit dolore esse voluptate mollit culpa incididunt et exercitation nostrud esse ea ipsum labore. Ullamco nostrud nulla esse quis cupidatat eiusmod sunt occaecat dolore aliquip nostrud non consectetur aute dolore. Non mollit proident ea cillum irure ex proident. Ea quis officia est irure mollit enim. Consectetur culpa laborum ut eiusmod dolor ullamco sint consectetur consectetur ut exercitation et occaecat esse. Labore magna id veniam ad eu commodo in fugiat non occaecat ullamco sunt.</p><p>Cupidatat anim esse ex dolor eiusmod Lorem enim eu non eu sit aliquip ad. Elit amet nulla nostrud dolor anim mollit irure aliqua anim aute dolore adipisicing culpa tempor. Ex fugiat pariatur irure Lorem amet excepteur eu irure in excepteur ullamco amet qui fugiat veniam. Ullamco laboris sunt proident aute exercitation officia cupidatat esse. Incididunt irure ipsum id duis esse dolor consectetur non nulla minim ad culpa ad. Proident nostrud eu eiusmod aute pariatur dolor duis minim est. Aliqua tempor elit id id. Est tempor mollit qui ex aute aute consectetur aute aliquip adipisicing.</p><p>Dolor proident et ex sit nisi ipsum sunt irure dolor reprehenderit aliqua quis amet cillum. Excepteur laborum ea labore dolore do pariatur sit. Quis nulla incididunt nostrud. Lorem cupidatat fugiat aute duis culpa ullamco nisi officia magna aute nostrud cupidatat anim tempor. Velit deserunt enim deserunt duis in exercitation minim id commodo cillum enim.</p></div></div></div></div></div></div><div class="delete-me"><div><div class="ms-iframe"><div class="ms-iframe-embed w-embed w-iframe"><iframe id="memberstack-iframe" src="https://memberstack-embeds.webflow.io/branding?ref=blank" sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups"></iframe>
179
180
181<style>
182iframe {
183		height: 100%;
184    width: 100%;
185    border-width: 0px;
186    border-style: inset;
187    border-color: initial;
188    border-image: initial;
189    border: 0;
190    border: none;
191    min-height: 0px;
192    min-width: 0px;
193    background: transparent;
194}
195
196* {
197    box-sizing: border-box;
198}
199
200/* width */
201::-webkit-scrollbar {
202    height: 0px;
203    width: 0px;
204    background-color:;
205}
206
207/* Track */
208::-webkit-scrollbar-track {
209    background: transparent; 
210}
211
212/* Handle */
213::-webkit-scrollbar-thumb {
214    background: transparent; 
215}
216
217/* Handle on hover */
218::-webkit-scrollbar-thumb:hover {
219    background: transparent; 
220}
221   
222</style></div><div class="hidden-embed w-embed w-script">
222<script>
223  // get the domain name of the page where the iframe is embedded
224  var domain = window.location.hostname;
225
226  // get the iframe element
227  var iframe = document.getElementById('memberstack-iframe');
228
229  // get the src attribute value of the iframe
230  var src = iframe.getAttribute('src');
231
232  // replace the ref value in the src with the domain name
233  src = src.replace('ref=blank', 'ref=' + domain);
234
235  // set the new src value to the iframe
236  iframe.setAttribute('src', src);
237</script>
237</div></div></div></div><div class="cta-button"></div></div>
237<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=66e9903ca2ba912c78a1811a" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
237<script src="https://cdn.prod.website-files.com/66e9903ca2ba912c78a1811a/js/share-link-highlighted-text.18857c883.js" type="text/javascript"></script>
237<!-- 💙 MEMBERSCRIPT #116 v0.1 💙 - SHARE HIGHLIGHTED TEXT LINKS -->
238<script>
239  // Function to encode text and position for URL
240  function encodeSelection(text, nodeIndex, textOffset) {
241    return btoa(encodeURIComponent(JSON.stringify({ text, nodeIndex, textOffset })));
242  }
243
244  // Function to decode selection from URL
245  function decodeSelection(encoded) {
246    try {
247      return JSON.parse(decodeURIComponent(atob(encoded)));
248    } catch (e) {
249      // If parsing fails, assume it's just the text in the old format
250      return { text: decodeURIComponent(atob(encoded)) };
251    }
252  }
253
254  // Function to remove existing highlight
255  function removeExistingHighlight() {
256    const existingHighlight = document.querySelector('.ms-highlight');
257    if (existingHighlight) {
258      const parent = existingHighlight.parentNode;
259      parent.replaceChild(document.createTextNode(existingHighlight.textContent), existingHighlight);
260      parent.normalize(); // Merge adjacent text nodes
261    }
262  }
263
264  // Function to handle text selection
265  function handleSelection() {
266    const selection = window.getSelection();
267    if (selection.toString().length > 0) {
268      removeExistingHighlight();
269
270      const range = selection.getRangeAt(0);
271      const selectedText = selection.toString();
272      const textNodes = getAllTextNodes(document.body);
273      const nodeIndex = textNodes.indexOf(range.startContainer);
274      const textOffset = range.startOffset;
275
276      // Create a unique identifier for the selection
277      const selectionId = encodeSelection(selectedText, nodeIndex, textOffset);
278
279      // Update URL with the selection parameter
280      const url = new URL(window.location);
281      url.searchParams.set('highlight', selectionId);
282      window.history.pushState({}, '', url);
283
284      // Highlight the selected text
285      highlightText(selectionId, range);
286    }
287  }
288
289  // Function to highlight text
290  function highlightText(selectionId, range) {
291    const span = document.createElement('span');
292    span.className = 'ms-highlight';
293    span.id = selectionId;
294    range.surroundContents(span);
295  }
296
297  // Function to highlight and scroll to text based on URL parameter
298  function highlightFromURL() {
299    removeExistingHighlight();
300
301    const url = new URL(window.location);
302    const highlightId = url.searchParams.get('highlight');
303
304    if (highlightId) {
305      const { text, nodeIndex, textOffset } = decodeSelection(highlightId);
306      const textNodes = getAllTextNodes(document.body);
307
308      if (nodeIndex !== undefined && textOffset !== undefined) {
309        // Use precise location if available
310        if (nodeIndex < textNodes.length) {
311          const node = textNodes[nodeIndex];
312          if (node.textContent.substr(textOffset, text.length) === text) {
313            const range = document.createRange();
314            range.setStart(node, textOffset);
315            range.setEnd(node, textOffset + text.length);
316            highlightText(highlightId, range);
317          }
318        }
319      } else {
320        // Fall back to searching for the first occurrence of the text
321        for (let node of textNodes) {
322          const index = node.textContent.indexOf(text);
323          if (index !== -1) {
324            const range = document.createRange();
325            range.setStart(node, index);
326            range.setEnd(node, index + text.length);
327            highlightText(highlightId, range);
328            break;
329          }
330        }
331      }
332
333      const highlightedSpan = document.getElementById(highlightId);
334      if (highlightedSpan) {
335        highlightedSpan.scrollIntoView({ behavior: 'smooth', block: 'center' });
336      }
337    }
338  }
339
340  // Helper function to get all text nodes
341  function getAllTextNodes(element) {
342    const textNodes = [];
343    const walk = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
344    let node;
345    while (node = walk.nextNode()) {
346      textNodes.push(node);
347    }
348    return textNodes;
349  }
350
351  // Add event listener for text selection
352  document.addEventListener('mouseup', handleSelection);
353
354  // Call highlightFromURL when the page loads
355  window.addEventListener('load', highlightFromURL);
356</script>
356</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.