29:null 2a:["$","title",null,{"children":"Highlighting html text | Mathieu Jouhet | Observable"}] 2f:Tbaf,controls = { const content = this || undefined const animate = searchOptions.includes("animateHue") if (content && state.animate !== animate) { state.animate = animate return content } state.animate = animate const container = html`

Search options

` const input = html`` const form = html`` const buttonRemove = html`` const buttonPrevious = html`` const buttonNext = html`` const perfsContainer = document.querySelector(".perfs-container") const update = debounce(() => { highlighter.perfs = [] highlighter.removeHighlight() highlighter.token.text = input.value highlighter.highlight() state.text = input.value const perfs = highlighter.perfs const totalTime = perfs.reduce((c, v) => c + v.time, 0) const results = highlighter?.matches?.length || 0 perfsContainer.innerHTML = "" perfsContainer.appendChild( createPerfGauge( {totalTime, perfs}, "24px", undefined, `${results} result${results > 1 ? "s" : ""} in ${totalTime.toFixed(1)} ms` ) ) }, 1000 / 60) const submitHandler = (e) => { e.preventDefault() update() } const summaryClickHandler = () => { if (!s.parentElement.open) { const { results } = highlighter.getResultsElements() highlighter.resyncAnimations(results) } } const removeHandler = () => { highlighter.removeHighlight() } const prevHandler = () => { highlighter.selectPrevResult() } const nextHandler = () => { highlighter.selectNextResult() } if (highlighter) { update() form.addEventListener("submit", submitHandler) input.addEventListener("input", update) buttonRemove.addEventListener("click", removeHandler) buttonPrevious.addEventListener("click", prevHandler) buttonNext.addEventListener("click", nextHandler) const summaries = markup.querySelectorAll("summary") summaries.forEach(s => s.addEventListener("click", summaryClickHandler)) } invalidation.then(() => { form.removeEventListener("submit", submitHandler) input.removeEventListener("input", update) buttonRemove.removeEventListener("click", removeHandler) buttonPrevious.removeEventListener("click", prevHandler) buttonNext.removeEventListener("click", nextHandler) const summaries = markup.querySelectorAll("summary") summaries.forEach(s => s.removeEventListener("click", summaryClickHandler)) }) container.appendChild(html`

${[form, buttonPrevious, buttonNext, buttonRemove]}

`) return container }30:T4ad,currentState = { highlighterStateMachine.highlight() const match = highlighterStateMachine.matches && highlighterStateMachine.matches[highlighterStateMachine.matches.length - 1] const innerState = highlighterStateMachine.state["text to be highlighted"] // This is some seriously stinky code - Please don't use this const mixedState = (match || innerState) const { currentNode, currentIndex, startNode, startOffset, endNode, endOffset } = mixedState const clonedNode = clonedNodes[textNodes.findIndex(n => n === currentNode || n === endNode)] const clonedStartNode = startNode && clonedNodes[textNodes.findIndex(n => n === startNode)] regularHighlighter.token = {className: "highlight"} regularHighlighter.removeHighlight() const range = regularHighlighter.createRange( clonedStartNode || clonedNode, startOffset || currentIndex, clonedNode, endOffset || (currentIndex + 1) ) regularHighlighter.wrapRange(range, "highlight", clonedNode, clonedNode) if (match) { regularHighlighter.selectNextResult() } else if (mixedState.current) ( regularHighlighter.root.querySelector("marker").classList.add("partial") ) return (match || innerState) }31:Tb02,md` ### The javascript state machine implementation Now, fear not, the following javascript is a bit lengthy, but that's the core logic of our logic for text to be highlighted! ${br()} We will test our implementation against the following markup, it contains enough to make sure our state machine does the job it was designed for: ${br()}

${introShort.outerHTML}

${br()}${br()} \`\`\`js // Enum for the state transitions values const StateTransition = { empty: 0, valid: 1, match: 2 } class Search { constructor(root, token) { this.root = root this.token = token.toLowerCase() this.state = {} } highlight() { this.state[this.token] = {} this.walk(this.root) } walk(node) { const treeWalker = document.createTreeWalker( node, NodeFilter.SHOW_TEXT ) while (treeWalker.nextNode()) { const current = treeWalker.currentNode this.search(current) } } search(node) { const text = node.textContent const state = this.state[this.token] const token = this.token.toLowerCase() for (let i = 0; i < text.length; i++) { const char = text[i] const next = \`\${state.current || ""}\${char.toLowerCase()}\` .replace(/\s+/g, " ") if (next === token) { this.transitionState(StateTransition.match, state, node, i, next) } else { const pos = token.indexOf(next) if (pos === 0) { this.transitionState(StateTransition.valid, state, node, i, next) } else { this.transitionState(StateTransition.empty, state, node, i, next) } } } } transitionState(type, state, node, i, next) { let debug = \`next: "\${next}"\` switch(type) { case StateTransition.empty: debug += " -> empty state" this.resetState(state) break case StateTransition.valid: debug += " -> valid state" if (!state.current || state.current.length === 0) { state.startNode = node state.startOffset = i } state.current = next break case StateTransition.match: const isSingleChar = this.token.length === 1 const startNode = isSingleChar ? node : state.startNode const startOffset = isSingleChar ? i : state.startOffset debug += ( \`Found match!\\n\` + \`startOffset: \${startOffset} - in "\${startNode.textContent}"\\n\` + \`endOffset: \${i + 1} - in "\${node.textContent}"\` ) this.resetState(state) break default: break } console.log(debug) } resetState(state) { delete state.current delete state.startNode delete state.startOffset } } \`\`\` ${runJavascriptStateMachine} ${br()}${br()}${br()} `32:T418,### ☝️ Heads up! You may, or may not have noted two important things in our implementation: - the first one is the usage of `string.toLowerCase()` to make our search case-insensitive, - and the second one is the `.replace(/\s+/g, " ")` we are doing after appending the current character. The later is to conform to the html behavior which collapses multiple spaces to a single space. This means you extraneous spaces in between nodes, so we need to collapse them to a single space when that happens, here's an example with the spaces outlined:

Some text to be ...

This could be improved by taking account of the css `white-space` property, and since we are adding characters one by one we could perform this regex based replacement only when strictly necessary, but then, here comes the famous "left-as-an-exercise" 🤷‍♂️ ${br()}${br()}${br()}33:T721,md` \`\`\`js // We need to keep a copy of the orginal starting and ending nodes // so we can clean up after ourselves function wrapRange(range, className, startNode, endNode) { const clonedStartNode = startNode.cloneNode(true) const clonedEndNode = endNode.cloneNode(true) // ... removeEmptyDirectSiblings(marker, clonedStartNode, clonedEndNode) } // The range method is convenient, but it can produce empty siblings // so we use this method to clean them up function removeEmptyDirectSiblings(element, clonedStartNode, clonedEndNode) { const remove = (element, originalNode) => { let keepRemoving = true while (keepRemoving) { keepRemoving = removeEmptyElement( element, originalNode ) } } remove(element.previousElementSibling, clonedStartNode) remove(element.nextElementSibling, clonedEndNode) } // Remove any empty element that wasn't found in the original (before wrapping) node // It's far from being bulletproof since we are comparing outerHTML, but it does // a decent enough job for our purposes function removeEmptyElement(element, originalNode) { const isInOriginalNode = (element) => ( originalNode.childNodes && Array.from(originalNode.childNodes).some( (c) => (c instanceof Element) && c.outerHTML === element.outerHTML ) ) if (element) { if (element.parentNode && !isInOriginalNode(element) && !element.textContent) { element.parentNode.removeChild(element) return true } else if (element.childNodes[0] === element.children[0]) { return removeEmptyElement(element.children[0], originalNode) } } return false } const {startNode, startOffset, endNode, endOffset} = exampleMatches2[0] const range = createRange(startNode, startOffset, endNode, endOffset) wrapRange(range, "highlight", startNode, endNode) \`\`\` `34:T98b,highlightExample2Button = { function createRange(startNode, startOffset, endNode, endOffset) { const range = new Range() range.setStart(startNode, startOffset) range.setEnd(endNode, endOffset) return range } // We then want to wrap the range in a tag with a specific className function wrapRange(range, className, startNode, endNode) { const clonedStartNode = startNode.cloneNode(true) const clonedEndNode = endNode.cloneNode(true) const selectedText = range.extractContents() const marker = document.createElement("marker") marker.classList.add(className) marker.appendChild(selectedText) range.insertNode(marker) removeEmptyDirectSiblings(marker, clonedStartNode, clonedEndNode) } // The range method is convenient, but it can produce empty siblings // so we use this method to clean them up function removeEmptyDirectSiblings(element, clonedStartNode, clonedEndNode) { const remove = (element, originalNode) => { let keepRemoving = true while (keepRemoving) { keepRemoving = removeEmptyElement( element, originalNode ) } } remove(element.previousElementSibling, clonedStartNode) remove(element.nextElementSibling, clonedEndNode) } // Remove any empty element that wasn't found in the original (before wrapping) node // It's far from being bulletproof since we are comparing outerHTML, but it does // a decent enough job for our purposes function removeEmptyElement(element, originalNode) { const isInOriginalNode = (element) => ( originalNode.childNodes && Array.from(originalNode.childNodes).some( (c) => (c instanceof Element) && c.outerHTML === element.outerHTML ) ) if (element) { if (element.parentNode && !isInOriginalNode(element) && !element.textContent) { element.parentNode.removeChild(element) return true } else if (element.childNodes[0] === element.children[0]) { return removeEmptyElement(element.children[0], originalNode) } } return false } const button = html`` button.addEventListener("click", () => { try { const {startNode, startOffset, endNode, endOffset} = exampleMatches2[0] const range = createRange(startNode, startOffset, endNode, endOffset) wrapRange(range, "highlight", startNode, endNode) } catch(e) { } }) return button }35:T417,### What's needed? To remove highlights, one strategy could be to save the markup before we apply highlights, and keep a list of all the replacements we made so we can restore it afterwards. This is not what we'll be using here, instead we will try our best to restore proper markup by truly unwrapping our highlights. Why do we want to do this? Because it maintains all the original elements, which can have event listeners attached to them. So from the beginning through the end, we want to make sure all the original nodes are kept intact. So what we need in the end, is a way to extract the content of our `` tag and swap the tag itself with its content, all while keeping the original nodes so we don't break anything. Fortunately, we can use a `DocumentFragment` to do just that. The idea is that we will append the ``’s child nodes to our `DocumentFragment` and the use it to replace the `` within our original document. Here's a visual representation of what we'll _not_ be doing: 36:T481,md` \`\`\`js function removeHighlight(element, className) { element.querySelectorAll( \`.\${className}\` ).forEach( el => { const fragment = document.createDocumentFragment() const childNodes = el.childNodes fragment.append(...Array.from(childNodes)) const parent = el.parentNode parent?.replaceChild(fragment, el) parent?.normalize() this.mergeAdjacentSimilarNodes(parent) } ) } /** * Merge adjacent nodes if they are instances of the same tag * @param parent */ function mergeAdjacentSimilarNodes(parent) { if (parent && parent.childNodes) { Array.from(parent?.childNodes).reduce((acc, val) => { if (val instanceof Element) { if (acc && acc.tagName.toLowerCase() === val.tagName.toLowerCase()) { acc.append(...Array.from(val.childNodes)) parent.removeChild(val) acc && mergeAdjacentSimilarNodes(acc) } else { acc && mergeAdjacentSimilarNodes(acc) acc = val } } else { acc && mergeAdjacentSimilarNodes(acc) acc = undefined } return acc }, undefined) } } \`\`\` `37:T5af,unhighlightExample2Button = { function removeHighlight(element, className) { element.querySelectorAll( `.${className}` ).forEach( el => { const fragment = document.createDocumentFragment() const childNodes = el.childNodes fragment.append(...Array.from(childNodes)) const parent = el.parentNode parent?.replaceChild(fragment, el) parent?.normalize() mergeAdjacentSimilarNodes(parent) } ) } /** * Merge adjacent nodes if they are instances of the same tag * @param parent */ function mergeAdjacentSimilarNodes(parent) { if (parent && parent.childNodes) { Array.from(parent?.childNodes).reduce((acc, val) => { if (val instanceof Element) { if (acc && acc.tagName.toLowerCase() === val.tagName.toLowerCase()) { acc.append(...Array.from(val.childNodes)) parent.removeChild(val) acc && mergeAdjacentSimilarNodes(acc) } else { acc && mergeAdjacentSimilarNodes(acc) acc = val } } else { acc && mergeAdjacentSimilarNodes(acc) acc = undefined } return acc }, undefined) } } const button = html`` button.addEventListener("click", () => { try { removeHighlight(unhighlightExample2, "highlight") } catch(e) { } }) return button }38:T431,## That's it! As you have seen across this notebook, highlighting html text isn't so trivial and there are many side concerns we have to be dealing with if we want it to be useful. Of course the solution presented in this notebook is far from being complete nor bulletproof. We are now merging adjacent similar nodes, but we're not checking whether or not those nodes were in the original markup in the first place, which we probably should. We learned how to use a javascript state machine and a few useful DOM apis, yet there are tons of ways to approach this problem, so you should never be afraid to explore for yourself and look for solutions that are tailored to your needs. Please note that this won't scale well with hundreds or thousands of results, because of all the DOM manipulations we have to do to highlight, and unhighlight previous results. But there are ways to make it faster, one could try using IntersectionObservers to only trigger the DOM updates when the nodes are actually visible. Or even draw the highlights in a canvas...39:T344e,InstantSearch = { const StateTransition = { empty: 0, valid: 1, match: 2 } /** * Search and higlight results within the given html root * Instanciate by giving it a `root` and a search `token` * * Here is what a SearchToken should look like * SearchToken { * text: string; * className?: string; * caseSensitive?: boolean; * } * * @param root - the root html container to perform the search in * @param token - a search token as described * @param scrollToResult - whether or not selecting a result should scroll it into view * @param defaultClassName * @param defaultCaseSensitive */ class InstantSearch { constructor( root, token, scrollToResult = true, defaultClassName = "highlight", defaultCaseSensitive = false, ) { this.state = {} this.root = root this.token = token this.scrollToResult = scrollToResult this.defaultClassName = defaultClassName this.defaultCaseSensitive = defaultCaseSensitive this.matches = [] this.perfs = [] } /** * Search and highlight occurrences of the current token in the current root */ highlight() { this.matches = [] this.state[this.token.text] = {} if (this.token.text.length > 0) { const t1 = performance.now() this.walk(this.root) const t2 = performance.now() this.perfs.push({event: "Search text", time: t2 - t1}) // reverse so the previous match offset don't change when wrapping the result const t3 = performance.now() this.matches.reverse().forEach(m => { const className = m.token.className || this.defaultClassName const range = this.createRange(m.startNode, m.startOffset, m.endNode, m.endOffset) this.wrapRange(range, className, m.startNode, m.endNode) }) const t4 = performance.now() this.perfs.push({event: "Highlight text", time: t4 - t3}) } } /** * Remove all highlights from the current root */ removeHighlight() { const t1 = performance.now() let element if (this.root instanceof Element) { element = this.root } else if (this.root.parentElement) { element = this.root.parentElement } element?.querySelectorAll( `.${this.token.className || this.defaultClassName}` ).forEach( el => { const fragment = document.createDocumentFragment() const childNodes = el.childNodes fragment.append(...Array.from(childNodes)) const parent = el.parentNode parent?.replaceChild(fragment, el) parent?.normalize() this.mergeAdjacentSimilarNodes(parent) } ) const t2 = performance.now() this.perfs.push({event: "Remove highlights", time: t2 - t1}) } /** * Merge adjacent nodes if they are instances of the same tag * @param parent */ mergeAdjacentSimilarNodes(parent) { if (parent && parent.childNodes) { Array.from(parent?.childNodes).reduce((acc, val) => { if (val instanceof Element) { if (acc && acc.tagName.toLowerCase() === val.tagName.toLowerCase()) { acc.append(...Array.from(val.childNodes)) parent.removeChild(val) acc && this.mergeAdjacentSimilarNodes(acc) } else { acc && this.mergeAdjacentSimilarNodes(acc) acc = val } } else { acc && this.mergeAdjacentSimilarNodes(acc) acc = undefined } return acc }, undefined) } } /** * Advance our state machine character by character in the given node * @param node */ search(node) { const text = node.textContent const token = this.token const state = this.state[token.text] const caseSensitive = token.caseSensitive || this.defaultCaseSensitive const tokenStr = caseSensitive ? token.text : token.text.toLowerCase() for (let i = 0; i < text.length; i++) { const char = text[i] const next = ( `${state.current || ""}${caseSensitive ? char : char.toLowerCase()}` .replace(/\s+/g, " ") ) if (next === tokenStr) { this.transitionState(StateTransition.match, state, node, i, next) } else { const pos = tokenStr.indexOf(next) if (pos === 0) { this.transitionState(StateTransition.valid, state, node, i, next) } else { this.transitionState(StateTransition.empty, state, node, i, next) } } } } /** * Execute the given state transition and update the state machine output * @param type * @param state * @param node * @param index * @param next */ transitionState(type, state, node, index, next) { // let debug = `next: "${next}"` switch(type) { case StateTransition.empty: // debug += " -> empty state" this.resetState(state) break case StateTransition.valid: // debug += " -> valid state" if (!state.current || state.current.length === 0) { state.startNode = node state.startOffset = index } state.current = next break case StateTransition.match: { const isSingleChar = this.token.text.length === 1 const startNode = isSingleChar ? node : state.startNode const startOffset = isSingleChar ? index : state.startOffset this.matches.push({ token: this.token, startNode, startOffset, endNode: node, endOffset: index + 1 }) // debug += ( // `\n[Found match!]\n` // + `startOffset: ${startOffset} - in "${startNode.textContent}"\n` // + `endOffset: ${i + 1} - in "${node.textContent}"` // ) this.resetState(state) break } default: break } // console.log(debug) } /** * Create a return a range for the given arguments * @param startNode * @param startOffset * @param endNode * @param endOffset */ createRange(startNode, startOffset, endNode, endOffset) { const range = new Range() range.setStart(startNode, startOffset) range.setEnd(endNode, endOffset ) return range } /** * Wrap a range with a with the given className * @param range * @param className * @param startNode * @param endNode */ wrapRange(range, className, startNode, endNode) { const clonedStartNode = startNode.cloneNode(true) const clonedEndNode = endNode.cloneNode(true) const selectedText = range.extractContents() const marker = document.createElement("marker") marker.classList.add(className) marker.appendChild(selectedText) range.insertNode(marker) this.removeEmptyDirectSiblings(marker, clonedStartNode, clonedEndNode) } /** * Remove any empty direct sibling before and after the element * @param element * @param clonedStartNode * @param clonedEndNode */ removeEmptyDirectSiblings(element, clonedStartNode, clonedEndNode) { const remove = (element, originalNode) => { let keepRemoving = true while (keepRemoving) { keepRemoving = this.removeEmptyElement( element, originalNode ) } } remove(element.previousElementSibling, clonedStartNode) remove(element.nextElementSibling, clonedEndNode) } /** * Remove any empty element that wasn't found in the original (before wrapping) node * @param element * @param originalNode */ removeEmptyElement(element, originalNode) { const isInOriginalNode = (element) => originalNode.childNodes && Array.from(originalNode.childNodes) .some( (c) => (c instanceof Element) && c.outerHTML === element.outerHTML ) if (element) { if (element.parentNode && !isInOriginalNode(element) && !element.textContent) { element.parentNode.removeChild(element) return true } else if (element.childNodes[0] === element.children[0]) { return this.removeEmptyElement(element.children[0], originalNode) } } return false } /** * Resets the state to be empty * @param state */ resetState(state) { delete state.current delete state.startNode delete state.startOffset return state } /** * Walk through the current root TextNodes * @param node */ walk(node) { let currentParent = undefined const treeWalker = document.createTreeWalker( node, NodeFilter.SHOW_TEXT ) while (treeWalker.nextNode()) { const current = treeWalker.currentNode if (current.parentElement) { const parent = current.parentElement const display = getComputedStyle(parent).display if ( !["", "contents", "inline", "inline-block"].includes(display) && currentParent !== parent ) { this.resetState(this.state[this.token.text]) currentParent = parent } } this.search(current) } } /** * Get the current highlighted results elements collection, the current active one, * and its corresponding index in the results collection */ getResultsElements() { const className = this.token.className || this.defaultClassName const results = this.root.querySelectorAll(`.${className}`) const active = this.root.querySelector(`.${className}.active`) const activeIndex = Array.from(results).findIndex(el => el === active) return { results, active, activeIndex } } /** * Switch selected result from the current one to the next one, open any closed detail * ancestor and scroll the next selected result into view should it not be visible already * @param active * @param next * @param results */ switchSelected(active, next, results) { const didOpenDetails = this.openDetailsAncestors(next) if (didOpenDetails) { this.resyncAnimations(results) } active?.classList.remove("active") next?.classList.add("active") if (this.scrollToResult) { const observer = new IntersectionObserver((entries) => { for (const entry of entries) { console.log(entry) if (entry.target === next && !entry.isIntersecting) { console.log(entry.isIntersecting) observer.unobserve(next) observer.disconnect() requestAnimationFrame( () => next.scrollIntoView({block: "center", behavior: "smooth"}) ) } else { observer.unobserve(entry.target) } } }) if (next) { observer.observe(next) } } } /** * Open any closed detail ancestor to the given element * @param element */ openDetailsAncestors(element) { const detailsAncestors = this.getDetailsAncestors(element) let didOpenDetails = false detailsAncestors.forEach(d => { if (!d.open && !d.children[0].contains(element)) { d.open = true didOpenDetails = true } }) return didOpenDetails } /** * Restart all the animations so they are in sync * When toggling content (like, when opening details), we sometimes need this */ resyncAnimations(results) { const className = this.token.className || this.defaultClassName results.forEach(r => { r.classList.remove(className) requestAnimationFrame(() => r.classList.add(className)) }) } /** * Cycle through results and select the next one, or the first one when * no result is currently selected */ selectNextResult() { const {results, active, activeIndex} = this.getResultsElements() const length = results.length const index = (activeIndex + 1) % length this.switchSelected(active, results[index], results) } /** * Cycle through results and select the previous one, or the last one when * no result is currently selected */ selectPrevResult() { const {results, active, activeIndex} = this.getResultsElements() const length = results.length const index = ((activeIndex > 0 ? activeIndex : length) - 1) this.switchSelected(active, results[index], results) } /** * Get all the

ancestors for a given element, including the element * itself if it's a

element */ getDetailsAncestors(element) { const details = [] let current = element while (current) { if ( current instanceof HTMLDetailsElement ) { details.push(current) } current = current.parentElement } return details } } return InstantSearch }3a:T534,3b:Taf0,function Scrubber(values, { format = value => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); form.i.style.setProperty("--min", `${form.i.min}`) form.i.style.setProperty("--max", `${form.i.max}`) form.i.style.setProperty("--value", `${form.i.valueAsNumber}`) }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }3c:Tc9b,3d:Taab,function createPerfGauge(obj, height = "24px", left, right,) { // Performance.now used to give microseconds resolution, but now some browsers limit // the timer resolution to avoid fingerprinting // Filter out 0ms events, // but save their original index for color consistency // { totalTime: 2.345667, perfs: [ {event: "name", time: 1.2345678}, {...} ] } const perfs = obj.perfs.filter( (e, i) => { e.originalIndex = i return e.time } ); return html`

${ left ? html` ${left} ` : "" }

Execution time lower than your browser's performance.now resolution setting ${perfs.map( (entry, i) => html` ${entry.time.toFixed(entry.time < 10 ? 2 :1)} ms ` )}

${ right ? html` ${right} ` : "" }

`; }3e:T728,3f:T13ee,40:T86d,intro = md` ## Sometimes you need text to be highlighted ${br()} And then, on the web, you often need _text_ to ***be*** _Highlighted_ within mixed and/or nested html tags/markup, like when you implement a search feature in your app. It's pretty easy to find implementations that can partially highlight text in html. But it's surprisingly hard to find one that deals with the scenario where the text _to be highlighted_ is spanning across multiple diverse html tags (think rich-text formatting)

Example: text to be highlighted

${br()}${br()}

So how do we solve this?

In order for text to be highlighted across multiple html elements, we can use a very simple state machine: the basic idea is that we loop character by character over the TextNodes within a given root until we eventually find the pattern corresponding to the text to be highlighted.

The point of this notebook is to show you a way to solve this problem (highlighting html text) using JavaScript and show you a few tricks along the way!

${br()}${br()}

A word of caution

There is a reason why so little existing solutions deal with this case: the state machine is probably slower compared to other methods that rely on native highly optimized code to search for text to be highlighted and there's a chance we're trading speed for precision.

With that being said, what really takes time when searching and highlighting text, is the highlighting part, and to be even more specific, the unhighlighting part is very costly. Since, for the text to be highlighted, we are modifying the DOM, the browser has to do a lot of layout work and this is always expensive.

No matter what, there is nothing more frustrating than seeing a match not being highlighted when others are, it just feels broken, and no mitigation will ever completely overcome this.

`41:T581,testText = md`

More tests for the text to be highlighted

We can go crazy with formatting and still get text to be ^highlighted, as long as the display context is inline or inline-block, we push forward the state of our state machine. Otherwise, we will reset the state, conforming to the visual representation of the page: blocks or table cells for instance should always create a new context.

This is some text to be highlighted on a dark background with some text that won't be highlighted (unless you specifically search for it of course)

The point is to make sure that no matter the background color, the Text to be Highlighted will be so on a way that contrasts with the background

Block context resets the state

Text to be

Highlighted

Block context overriden va css

Text to be

Highlighted

Repeat search pattern

${(md`${`the _text_ to be _highlighted_ can be formatted like crazy, for example: _text_ to be _hIgHli**gH**ted_ `.repeat(32)}`)}

`42:T7cf,javascriptClasses = md` As you may or may not know already, JavaScript classes are mostly syntactic sugar, and can be seen more as a template for creating objects (JavaScript is based on [prototypal inheritance](https://javascript.info/prototype-inheritance)) So even though we'll be using classes, what we really create are objects. ${br()}${br()} **Take the following code:** \`\`\`js // This is our constructor, it is run every time you call \`new Search()\` const Search = function(token) { this.token = token } // This is a method available to all objects of the same type Search.prototype.highlight = function() { console.log(\`Highlighting "\${this.token}"\`) } // Instanciate and run our method const search = new Search("text to be highlighted") search.highlight() \`\`\` ${runJavascriptClasses1} ${br()} **This could be written as a class as:** \`\`\`js class Search { constructor(token) { this.token = token } highlight() { console.log(\`Highlighting "\${this.token}"\`) } } const search = new Search("text to be highlighted") search.highlight() \`\`\` ${runJavascriptClasses2} ${br()} **It's the same, so why do we care?** Well, the whole point is _clarity_ and _legibility_, the whole class being within its own block so we don't have to think as much about [scope and closure](https://javascript.info/closure). It also abstracts away the concept of \`prototype\`, which is one the reasons why some people are so scared about JavaScript. They are also very useful when using [TypeScript](https://www.typescriptlang.org/). Through this notebook _we will voluntarily avoid complexity_ and not use any \`readonly\`, \`private\`, \`protected\` nor \`static\` properties, although you should know they exist, and that's where classes become super helpful in writing more solid code. We also won't use any inheritance (\`extends\`) and deal with a single class. **TL;DR;** it makes things cleaner and easier to maintain. `43:T881,javascriptTreeWalker = md` How do you efficiently traverse a DOM structure? A DOM structure is a actually a Tree structure and, fortunately, the DOM JavaScript API gives us a very handy tool for doing exactly that, it's called a \`TreeWalker\`, and iterates over the nodes contained within a root node. We will use a \`TreeWalker\` to traverse the tree and look specifically for text nodes, in which we'll then look for the search token we're interested in. A \`TreeWalker\` can be creating by calling \`document.createTreeWalker(root, whatToShow)\`, where \`root\` is the starting node, and where \`whatToShow\` is one of the properties of \`NodeFilter\`. We'll use the introduction text as our root, and \`NodeFilter.SHOW_TEXT\` to only work on TextNodes, avoiding unecessary work on all the [other node types](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType). There are [more possible arguments you can pass](https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker) to \`createTreeWalker\`, but we need only those two for our purposes **NB:** we're not showing the instanciation code anymore: \`\`\`js class Search { constructor(root, token) { this.root = root this.token = token } highlight() { this.walk(this.root) } walk(root) { const treeWalker = document.createTreeWalker( node, NodeFilter.SHOW_TEXT ) while (treeWalker.nextNode()) { const current = treeWalker.currentNode console.log(\`Current TextNode content is "\${current.textContent}"\`) } } } \`\`\` ${runJavascriptTreeWalker} ${br()}${br()}${br()}${br()} ### Wait, that's it?! Well, not really, if we didn't want to support for the possibility for the text to be highlighted to be split across multiple html nodes, we could stop here and look for the presence of our token using either \`indexOf()\` or \`search()\`. We would use the indices they return to wrap the match with the element we want to highlight a match (they both return \`-1\` if no match was found). For our exercise, we need a simple _state machine_ to memorize the state of our search while traversing the DOM structure `44:Tc6b,StoppableStateMachine = { const StateTransition = { empty: 0, valid: 1, match: 2 } class Search { constructor(root, token, consoleImpl = console, stopIndex = undefined) { this.root = root this.token = token this.state = {} this.console = consoleImpl this.stopIndex = stopIndex this.matches = [] } highlight() { this.matches = [] this.state[this.token] = {} this.currentIndex = 0 this.walk(this.root) } walk(node) { const treeWalker = document.createTreeWalker( node, NodeFilter.SHOW_TEXT ) while (treeWalker.nextNode()) { const current = treeWalker.currentNode this.search(current) } } search(node) { const text = node.textContent const state = this.state[this.token] const token = this.token.toLowerCase() for (let i = 0; i < text.length; i++) { if (!this.stopIndex && this.stopIndex !== 0 || this.currentIndex <= this.stopIndex) { const char = text[i] const next = `${state.current || ""}${char.toLowerCase()}` .replace(/\s+/g, " ") if (next === token) { this.transitionState(StateTransition.match, state, node, i, next) } else { const pos = token.indexOf(next) if (pos === 0) { this.transitionState(StateTransition.valid, state, node, i, next) } else { this.transitionState(StateTransition.empty, state, node, i, next) } } state.currentIndex = i } if (!this.stopIndex && this.stopIndex !== 0 || this.currentIndex <= this.stopIndex) { state.currentNode = node } this.currentIndex++ } } transitionState(type, state, node, i, next) { let debug = `next: "${next}"` switch(type) { case StateTransition.empty: debug += " -> empty state" this.resetState(state) break case StateTransition.valid: debug += " -> valid state" if (!state.current || state.current.length === 0) { state.startNode = node state.startOffset = i } state.current = next break case StateTransition.match: const isSingleChar = this.token.length === 1 const startNode = isSingleChar ? node : state.startNode const startOffset = isSingleChar ? i : state.startOffset this.matches.push({ token: this.token, startNode, startOffset, endNode: node, endOffset: i + 1 }) debug += ( `\n[Found match!]\n` + `startOffset: ${startOffset} - in "${startNode.textContent}"\n` + `endOffset: ${i + 1} - in "${node.textContent}"` ) this.resetState(state) break default: break } this.console.log(debug) } resetState(state) { delete state.current delete state.startNode delete state.startOffset } } return Search }45:T113c,stateMachineGraph = svg` `46:[] 2d:{"id":"f74a8202a20349f2","slug":"highlighting-html-text","title":"Highlighting html text","thumbnail":"28e3b2e6d258639faf453d539df8647a044279f128a0ac8c7f9fc6211a681b4f","access_level":"public","create_time":"$D2021-10-30T09:33:04.898Z","update_time":"$D2022-06-29T17:12:28.921Z","view_time":null,"first_public_time":"$D2022-06-29T16:44:44.017Z","has_unpublished_edits":null,"fork":false,"stars":44,"starred":false,"owner":{"type":"team","id":"56478bd83f2190f0","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":"starter_2024"},"version":2780,"publish_version":2780,"role":null,"authored":false,"authors":[{"type":"individual","id":"e5f68da25a5a2366","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":null}],"members":[{"type":"individual","id":"e5f68da25a5a2366","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":null,"role":"editor"},{"type":"individual","id":"b3bb5f1338284a8e","login":"b3bb5f1338284a8e","name":"Ludovic Ollagnier","avatar_url":"https://avatars-next.observableusercontent.com/4e089673365fe2e1aeb43bff92b6bb45d42be135fb475b678e092fb831095e9b","tier":null,"role":"viewer"},{"type":"individual","id":"2b40f71ace826d79","login":"nckh","name":"Greg de J","avatar_url":"https://avatars-next.observableusercontent.com/b78d14032b07a4740742bd443929b00d12cd6b1d7699c54fe0046a898982b29a","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Highlighting html text","cells":[{"id":0,"value":"# Highlighting html text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2171,"value":"This is a live notebook you can interact with in real-time, and in which we'll build a simple javascript state machine to search and highlight text in arbitrary html markup\n\n*See also Fabian Iwand's notebook [Highlight code](https://observablehq.com/@mootari/highlight) for an alternative implementation.*\n\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"viewof searchOptions = checkbox({\n options: [\n { value: \"caseInsensitive\", label: `Ignore case` },\n { value: \"animateHue\", label: `Animate hue` },\n { value: \"scrollToResult\", label: `Scroll to active result (if supported)` },\n ],\n value: [state.caseSensitive ? \"\" : \"caseInsensitive\", \"animateHue\", \"scrollToResult\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2524,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2528,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"markup = md`\n ${br()}\n ${intro}\n \n ${br()}${br()}${br()}${br()}\n\n ## Let's learn how to fish!\n ${br()}\n Some parts are quite basic concepts, and some are more advanced topics, feel free to skip anything you feel like you already know enough about\n\n Here is a review of the features for what we'll be building:\n ${br()}${br()}${br()}\n ${details(\n md`### Feature Emoji Table`,\n features,\n true,\n \"features\"\n )}\n ${br()}${br()}\n ${testText}\n\n ${br()}${br()}${br()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2331,"value":"md`\n ${details(\n md`## JavaScript classes`,\n javascriptClasses,\n false\n )}\n ${br()}${br()}${br()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2031,"value":"md`\n ${details(\n md`## Create and use a TreeWalker`,\n javascriptTreeWalker,\n true\n )}\n ${br()}${br()}${br()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2036,"value":"## To the ~~time~~ state machine!\nA state machine is a fancy name for a behavior model and describes an automaton with a finite number of states. Based on the current state and a given input, the machine performs state transitions and produces outputs.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1881,"value":"### So how does that really work?\n\nHere is a very simple demo to show you how the state machine behaves as it scans our text nodes. You can pause it and use the scrubber (hats off to Mr Bostock) to inspect the state at any given position.\n\nNotice how we have a partial match first that gets discarded as soon as we encounter an unexpected character:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2310,"value":"**JavaScript simple state machine to highlight html**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1592,"value":"stateMachineDemoMarkupPre = html`\n

\n\"> ${clonedNodes[0]}\n\"> ${clonedNodes[1]}\n\"> ${clonedNodes[2]}\"> \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1605,"value":"viewof i = Scrubber(numbers, {delay: 125, initial: numbers.length - 1, loopDelay: 2000})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1684,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2111,"value":"md`\n**Visual representation of the state machine**\n\nHere is a diagram of our state machine, it's actually pretty simple:\n

\n ${stateMachineGraph}\n

Diagram of our state machine

\n \n${br()}${br()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2119,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2180,"value":"## Now this is great, but where are the html highlights?\nWell, we needed to first _find_ matches before we could _highlight_ them, and now that we do, let's wrap them within a marker tag to actually highlight our html text.\n\nTo do this, we will use the very convenient `Range` API and separate our task into different functions (which should be added as methods of our class, but I've extracted them as regular functions for brevity):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2187,"value":"md`\n\n\\`\\`\\`js\n// We first need to be able to create ranges that hold the text to be highlighted\nfunction createRange(startNode, startOffset, endNode, endOffset) {\n const range = new Range()\n range.setStart(startNode, startOffset)\n range.setEnd(endNode, endOffset)\n return range\n}\n\n// We then want to wrap the range in a tag with a specific className\nfunction wrapRange(range, className) {\n const selectedText = range.extractContents()\n const marker = document.createElement(\"marker\")\n marker.classList.add(className)\n marker.appendChild(selectedText)\n range.insertNode(marker)\n}\n\nconst {startNode, startOffset, endNode, endOffset} = exampleMatches[0]\nconst range = createRange(startNode, startOffset, endNode, endOffset)\nwrapRange(range, \"highlight\")\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2217,"value":"highlightExample1 = {\n highlightExample1Reset\n return html`\n

\n Example:\n text to be highlighted and more\n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2227,"value":"exampleMatches = {\n const highlighter = new StoppableStateMachine(\n highlightExample1,\n \"text to be highlighted\",\n {log: () => {}}\n )\n highlighter.highlight()\n return highlighter.matches\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2225,"value":"highlightExample1Button = {\n function createRange(startNode, startOffset, endNode, endOffset) {\n const range = new Range()\n range.setStart(startNode, startOffset)\n range.setEnd(endNode, endOffset)\n return range\n }\n \n // We then want to wrap the range in a tag with a specific className\n function wrapRange(range, className) {\n const selectedText = range.extractContents()\n const marker = document.createElement(\"marker\")\n marker.classList.add(className)\n marker.appendChild(selectedText)\n range.insertNode(marker)\n }\n const button = html``\n button.addEventListener(\"click\", () => {\n try {\n const {startNode, startOffset, endNode, endOffset} = exampleMatches[0]\n const range = createRange(startNode, startOffset, endNode, endOffset)\n wrapRange(range, \"highlight\")\n } catch(e) {\n \n }\n })\n\n return button\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2249,"value":"viewof highlightExample1Reset = {\n const button = html``\n return button\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2271,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2258,"value":"Now you may have noticed that _there are two empty elements surrounding the marker_ we just created. Using the `range` API is very convenient because we don't have to deal with the markup, but we might want to clean up afterwards to avoid these empty elements.\n\nIn order to do this, we have to keep a _copy_ of the original starting and ending nodes before highlighting so we can remove any empty element that wasn't in the original markup:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2207,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2279,"value":"highlightExample2 = {\n highlightExample2Reset\n return html`\n

\n Example:\n text to be highlighted and more\n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2289,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2282,"value":"viewof highlightExample2Reset = {\n const button = html``\n return button\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2285,"value":"exampleMatches2 = {\n const highlighter = new StoppableStateMachine(\n highlightExample2,\n \"text to be highlighted\",\n {log: () => {}}\n )\n highlighter.highlight()\n return highlighter.matches\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2299,"value":"Much better, we don't get any orphan spaces or empty nodes left, we're pretty close to being done, be we should also work on the possibility to remove the marker tag and restore an acceptable markup when we do remove highlights","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2365,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2362,"value":"## Unwrapping html tags (removing the highlights)\n\nOf course, with great powers, comes great responsibility, and if you can highlight anything, you should also be able to un-highlight it as well. It's the last part of our journey, but it's pretty important we can clean up after ourselves: manners!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2573,"value":"

\n Example:\n text to be highlighted and more\n

\n Original:\n text to be highlighted and more\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"unhighlightSource","database":"$undefined"},{"id":2658,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2595,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2611,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2666,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2662,"value":"### The basic version","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2627,"value":"md`\n\\`\\`\\`js\nfunction removeHighlight(element, className) {\n element.querySelectorAll(\n \\`.\\${className}\\`\n ).forEach(\n el => {\n const fragment = document.createDocumentFragment()\n const childNodes = el.childNodes\n fragment.append(...Array.from(childNodes))\n const parent = el.parentNode\n parent?.replaceChild(fragment, el)\n }\n )\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2631,"value":"unhighlightExample = {\n unhighlightExampleReset\n return unhighlightSource.cloneNode(true)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2642,"value":"unhighlightExampleButton = {\n function removeHighlight(element, className) {\n element.querySelectorAll(\n `.${className}`\n ).forEach(\n el => {\n const fragment = document.createDocumentFragment()\n const childNodes = el.childNodes\n fragment.append(...Array.from(childNodes))\n const parent = el.parentNode\n parent?.replaceChild(fragment, el)\n }\n )\n }\n \n const button = html``\n button.addEventListener(\"click\", () => {\n try {\n removeHighlight(unhighlightExample, \"highlight\")\n } catch(e) {\n \n }\n })\n\n return button\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2638,"value":"viewof unhighlightExampleReset = {\n const button = html``\n return button\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2670,"value":"Now, this is great, but you may have noticed that we're not exactly restoring things as they were! The original underlined text at the end was split across two nodes in the process. A simple approach to this could be to merge adjacent similar nodes together afterwards:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2707,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2710,"value":"### An improved version of the unhighlighting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2581,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2676,"value":"unhighlightExample2 = {\n unhighlightExample2Reset\n return unhighlightSource.cloneNode(true)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2679,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2674,"value":"viewof unhighlightExample2Reset = {\n const button = html``\n return button\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2715,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2703,"value":"

via GIPHY

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2719,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2723,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2737,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2745,"value":"## Want some more?\n\nLearn how to create this [generative stencil effect using svg + javascript](https://observablehq.com/@daformat/distributing-circles-around-a-shape) vector math, and let's stencil all the things!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2741,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1422,"value":"
\n\n---\n\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1482,"value":"## The complete class","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"highlighter = markup && initialText && new InstantSearch(\n markup,\n {\n text: state.text,\n caseSensitive: !searchOptions.includes(\"caseInsensitive\")\n },\n searchOptions.includes(\"scrollToResult\")\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"```\nThe css you want to start with in order to highlight\n(remove the tint animation if you don't need it):\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1527,"value":"$3a","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"
\n\n---\n\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"## The rest","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"initialText = \"text to be highlighted\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"state = {return {text: initialText}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"details = function(summary, content, open = false, className) {\n return html`\n

${summary}

\n ${content}\n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"br = function() {\n return html`

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"s = \" \"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"debounce = require(\"lodash.debounce\").catch(() => window.debounce)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1622,"value":"$3c","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2375,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2377,"value":"colors = [\"#073b4c\", \"#118ab2\", \"#06d6D0\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2379,"value":"textColors = [\"#fff\", \"#fff\", \"#fff\", \"#fff\", \"#fff\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2548,"value":"#### Tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2399,"value":"$3e","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2559,"value":"{\n const handler = (e) => {\n if (e.target.getAttribute(\"tooltip\")) {\n if (document.activeElement.getAttribute(\"tooltip\")) {\n document.activeElement.blur()\n }\n }\n }\n document.addEventListener(\"mouseover\", handler , true)\n invalidation.then(() => document.removeEventListener(\"mouseover\", handler , true));\n return handler\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1429,"value":"
\n\n---\n\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"

Style

CSS is form,\nform follows function[s],\nindeed, that is a pun

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1531,"value":"$3f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"html`\n

Dynamic style

Allows to preserve the state\nOf the css animation\nWhen toggling it on/off

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1565,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"
\n\n---\n\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"## Misc\nText sources and code samples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1492,"value":"
\n\n---\n\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"## Intro\nthe short version is kept separate so we can use it in code samples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"introShort = md`\n## Sometimes you need text to be highlighted\n${br()}\nAnd then, on the web, you often need _text_ to ***be*** _Highlighted_ within mixed and/or nested html tags/markup, like when you implement a search feature in your app. It's pretty easy to find implementations that can partially highlight text in html.\n\nBut it's surprisingly hard to find one that deals with the scenario where the text _to be highlighted_ is spanning across multiple diverse html tags (think rich-text formatting)\n\n

Example: text to be highlighted

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"## Test text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"## Feature table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"features = md`\nEmoji | Feature\n-------------------|--------\n🧐${s}Indeed | Match case / case insensitivity\n😎 Yeah | Search and highlight text split across multiple html tags\n🤟 Yup | Search for text to be highlighted with respect to css display property value (will reset state upon encountering non-inline elements)\n🤩 Neat | Navigate through search results and automatically opens closed \\`details\\` ancestors if needed and resets hue animation so all elements are in sync\n🥳 Definitely | Properly highlight search results that spans across multiple lines\n🤦${s}Of${s}course | Useless hue rotate animation (feel free not to use it)\n❌ Nope | Support multi token search (you will have to run as many instances as you have earch tokens)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"## JavaScript Classes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"`Text`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1509,"value":"`Code 1`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"runJavascriptClasses1 = {\n const button = html``\n const pre = html`

`\n  const console = {\n    log: (what) => {\n      pre.appendChild(html`${what}
`)\n      pre.parentElement.classList.add(\"visible\")\n      pre.scrollTop = pre.scrollHeight\n    }\n  }\n  const Search = function(token) {\n    this.token = token\n  }\n  \n  // This is a method available to all objects of the same type\n  Search.prototype.highlight = function() {\n    console.log(`Highlighting \"${this.token}\"`)\n  }\n  button.onclick = () => {\n    pre.textContent = \"\"\n    const search = new Search(\"text to be highlighted\")\n    search.highlight()\n  }\n  return html`${button}${pre}
`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1501,"value":"`Code 2`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"runJavascriptClasses2 = {\n  const button = html``\n  const pre = html``\n  const console = {\n    log: (what) => {\n      pre.appendChild(html`${what}
`)\n      pre.parentElement.classList.add(\"visible\")\n      pre.scrollTop = pre.scrollHeight\n    }\n  }\n  class Search {\n    constructor(token) {\n      this.token = token\n    }\n  \n    highlight() {\n      console.log(`Highlighting \"${this.token}\"`)\n    }\n  }\n  button.onclick = () => {\n    pre.textContent = \"\"\n    const search = new Search(\"text to be highlighted\")\n    search.highlight()\n  }\n  return html`${button}${pre}
`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"## JavaScript TreeWalker","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1456,"value":"`Text`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1453,"value":"`Code`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"runJavascriptTreeWalker = {\n  const button = html``\n  const pre = html``\n  const console = {\n    log: (what) => {\n      pre.appendChild(html`${what}
`)\n      pre.parentElement.classList.add(\"visible\")\n      pre.scrollTop = pre.scrollHeight\n    }\n  }\n  class Search {\n    constructor(root, token) {\n      this.root = root\n      this.token = token\n    }\n  \n    highlight() {\n      this.walk(this.root)\n    }\n  \n    walk(node) {\n      const treeWalker = document.createTreeWalker(\n        node,\n        NodeFilter.SHOW_TEXT\n      )\n      while (treeWalker.nextNode()) {\n        const current = treeWalker.currentNode\n        console.log(`Current TextNode content is \"${current.textContent}\"`)\n      }\n    }\n  }\n  button.onclick = () => {\n    pre.textContent = \"\"\n    const search = new Search(intro, \"text to be highlighted\")\n    search.highlight()\n  }\n  return html`${button}${pre}
`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"## JavaScript State Machine","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1449,"value":"`Text`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"`Code`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"runJavascriptStateMachine = {\n  const button = html``\n  const pre = html``\n  const console = {\n    log: (what) => {\n      pre.appendChild(html`${what}
`)\n      pre.parentElement.classList.add(\"visible\")\n      pre.scrollTop = pre.scrollHeight\n    }\n  }\n  \n  button.onclick = () => {\n    pre.textContent = \"\"\n    const search = new StoppableStateMachine(introShort, \"text to be highlighted\", console)\n    search.highlight()\n  }\n  return html`${button}${pre}
`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1437,"value":"`Svg diagram`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1269,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1668,"value":"stateMachineDemoMarkup = html`Some text to be almost a match and some text to be highlighted
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1822,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1711,"value":"textNodes = {\n  const nodes = []\n  const walker = document.createTreeWalker(stateMachineDemoMarkup, NodeFilter.SHOW_TEXT)\n  while (walker.nextNode()) {\n    nodes.push(walker.currentNode)\n  }\n  return nodes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"clonedNodes = i >= 0 && textNodes.map(n => n.cloneNode())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1667,"value":"highlighterStateMachine = new StoppableStateMachine(\n  stateMachineDemoMarkup,\n  \"text to be highlighted\",\n  {log: () => {}},\n  i\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"regularHighlighter = new InstantSearch(stateMachineDemoMarkupPre, undefined, false)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"numbers = Array.from({length: stateMachineDemoMarkup.textContent.length}, (_, i) => i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2753,"value":"---\n## Tests","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2758,"value":"{\n  // \"foofoo\" -> foofoofoofoo -> \"foofoo\"\"foofoo\"\n  \n  // plain text at the beginning -> \"foofoobar
\"\n  // plain text at the beginning -> \"foofoo
\"\n  // plain text wrapping an element\n  // plain text wrapping multiple elements\n  // plain text crossing child element border\n  // plain text crossing parent element border\n  // plain text spanning two divs\n  // plain text spanning two spans\n  // \n  [\"foobar\"]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2760,"value":"\"foo    bar\"\n\"foo bar\"\n\n\"lorem ipsum   foo  bar\"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2763,"value":"PINNED_SLUG = (n=>fetch(`https://api.observablehq.com/${n}.js?v=1`).then(r=>r.text()).then(t=>'@'+t.match(/\\n\\/\\/ Version:\\s+(\\d+)/)[1]).catch(e=>'').then(v=>n+v))('@daformat/distributing-circles-around-a-shape')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1","titling":"auto"}}
2e:"$2d:body"