From 1f1ad17d02e2c7749749dc4aae46ecf311624014 Mon Sep 17 00:00:00 2001 From: Michael Roitzsch Date: Mon, 19 Oct 2020 19:07:56 +0200 Subject: [PATCH] highlight filter term in content use tag and style accordingly --- index.html | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index c203972..aecc167 100644 --- a/index.html +++ b/index.html @@ -27,18 +27,28 @@ class Converter { generateTerm(text) { const dt = document.createElement("dt"); dt.setAttribute("class", "col-sm-2"); - dt.append(this.highlight(text)); + dt.append.apply(dt, this.highlight(text)); return dt; } generateDefinition(text) { const dd = document.createElement("dd"); dd.setAttribute("class", "col-sm-10"); - dd.append(this.highlight(text)); + dd.append.apply(dd, this.highlight(text)); return dd; } highlight(text) { - // TODO: highlight search text using - return text; + if (!this.filter.length) return Array(text); + let result = new Array(); + let index = 0; + while (index = text.toLowerCase().indexOf(this.filter.toLowerCase()), index >= 0) { + result.push(text.substr(0, index)); + const mark = document.createElement("mark"); + mark.append(text.substr(index, this.filter.length)); + result.push(mark); + text = text.substr(index + this.filter.length); + } + result.push(text); + return result; } } @@ -70,6 +80,12 @@ document.addEventListener("DOMContentLoaded", event => { body { font-size: 90%; } + mark { + position: relative; + z-index: -1; + padding: .2em; + margin: -.2em; + }

Apple Internals