tricinel / highlight-words

Split a piece text into multiple chunks based on a search query, allowing you to highlight the matches afterwards.

Hey there!

Book 1:1 👉 Start shipping

I'm Bogdan!

I'm the accessibility consultant who helps product owners ship accessible websites without blocking ongoing work.

I have over ten years of experience working in the education and healthcare sectors, with expertise in inclusive design, technology and accessibility on the web.

Imagine you didn't have to worry about:

• ✅ critical accessibility issues in production,
• ✅ cryptic issues in your backlog,
• ✅ how long it takes your team to fix the accessibility issues in it,
• ✅ new accessibility issues a release introduces,
• ✅ costly redesigns and rework, or
• ✅ what all the fancy acronyms mean.

I do this through a monthly subscription that allows us to work together based on the level of support your team needs. I belive this is the most effective way to make progress quickly. By eliminating the friction of changing priorities, debating scope and exchanging proposals, contracts and statements of work, I can help you consistently ship an accessible product.

Book 1:1 👉 Start shipping

Grab a free accessibility resource

• Accessibility Checklists. A set of free checklists as PDFs for product owners, designers, developers and testers to nudge you towards a more accessible outcome by weaving accessibility into your software development lifecycle.
• Six Days to an Accessible Website. A free six day email course to teach you how to get the upper-hand on 1 million websites by fixing the most common accessibility issues on yours.

Or use one of my open source packages:

Project	Description
Accessibility CSS Reset	A style reset specifically aimed at accessibility that embraces modern CSS features to help start your project without accessibility errors
WCAG2.2 Search Alfred Workflow	Alfred workflow to search the Web Content Accessibility Guidelines (WCAG).
Highlight Words	Split a piece of text into chunks given a search query, by separating matches from non-matches, allowing you to highlight the matches, visually or otherwise, in your app

Languages and Tools

GitHub Stats

Get in touch

highlight-words's Issues

Invalid query type

highlight-words/src/index.ts

Line 15 in 8183ed5

query: string;

Should also include RegExp

ESM Support

Hi @tricinel !

Just upgraded to Node.js ESM ("type": "module" in package.json) and highlight-words is breaking 😨

import highlightWords from 'highlight-words';

// 💥  Error on line below: highlightWords is not a function
highlightWords({
  text: 'The quick brown fox jumped over the lazy dog',
  query: 'over'
});

Workaround

import highlightWords from 'highlight-words';

highlightWords.default({
  text: 'The quick brown fox jumped over the lazy dog',
  query: 'over'
});

New Option: `clipByLength`

Ah I was just thinking more about my use case (more info here: #6), and I was thinking maybe it would help to have an option clipByLength in addition to clipBy, which would clip with an ellipsis not by number of words but by number of characters?

Alternative: keep clipBy for the actual number value, and add an option clipByType with possible values of "words" and "characters" (defaults to "words")

Motivation: With only the clipBy option, users may run into problems with super long "words" such as URLs that don't get clipped reasonably.

Example

const text = 'My dog is a very good boy and is always eating his lunch.';
const chunks = highlightWords({
  text,
  query: 'is',
  clipByLength: 7
});

Value for chunks:

[
  {
    "text": "My dog ",
    "match": false
  },
  {
    "text": "is",
    "match": true
  },
  {
    "text": " a very ... oy and ",
    "match": false
  },
  {
    "text": "is",
    "match": true
  },
  {
    "text": " always ... ating h",
    "match": false
  },
  {
    "text": "is",
    "match": true
  },
  {
    "text": " lunch.",
    "match": false
  }
]

This work with IE browser?

Hi, nice lib!

just wondering if this work with Internet explorer browser?

highlight-words libray is giving Math.random vunerbility scan as high

highlight-words library is giving Math.random vulnerability scan as high, can we please fix it soon and get a new version

That probably means you (or a plugin you are using) is using the JS native Math.random() which has been deemed insecure. You can replace those functions with the latest JS crypto stuff here: https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues

We are using Material-React-Table, and this is the only high warning we got because highlight-words is used by Material-React-Table. No other libraries used by Material-React-Table gave any warning. That probably means you (or a plugin you are using) is using the JS native Math.random() which has been deemed insecure. You can replace those functions with the latest JS crypto stuff here as a recommendation. What you commented makes sense, but if you can replace Math.random(), it will make our scan clean. We mentioned it only because this is the only warning we got when using Material-React-Table and sometimes companies refuse to use it just because of the warning even though its not anything significant. See the attached screenshot.

Investigate potential performance issues

If we have a lot of content to parse, we might incur a performance penalty.

Questions to answer:

1. Is there a break point after which we start to notice any performance issues with the splitter?
2. Are there performance issues in the browser only, i.e. when construing the CSSOM or during paint?

Relates to #6

Option to ignore diacritics

Hello, I use the library for a search field and the matching algorithm ignores diacritics (for example apple matches ápplè), but the highlighting generated from this library does not produce a match. An option to ignore diacritics when generating the chunks would be nice, since the input cannot just be stripped as the outputted chunks of course will be stripped as well.

Regular expresion in query param?

Is possible to use a regular expression in query param?

Regards.

Option Proposal: `maxLength`

Hi there!

First of all, I want to thank you for this library - really nice API and options for splitting text into chunks! Super helpful for a lot of different use cases 💯

I wanted to test the waters about a potential option maxLength, allowing for aborting the matching process early, improving performance when matching small parts of large text content.

It could work as follows:

const chunks = highlightWords({
  text: 'General Kenobi, years ago you served my father in the Clone Wars. Now he begs you to help him in his struggle against the Empire. I regret that I am unable to present my father's request to you in person, but my ship has fallen under attack and I'm afraid my mission to bring you to Alderaan has failed. I have placed information vital to the survival of the Rebellion into the memory systems of this R2 unit. My father will know how to retrieve it. You must see this droid safely delivered to him on Alderaan. This is our most desperate hour. Help me, Obi-Wan Kenobi, you're my only hope.',
  query: 'o',
  clipBy: 3,
  // Return an array of chunks, with a total string length of 70 characters or less
  maxLength: 70,
});

I would suggest that the algorithm always end on a non-matching chunk, so that there is always context around the matches on either side.

---

Workaround: I have a workaround that filters after the matching has taken place, but at that point, the performance impact has already been made:

let resultLength = 0;
let resultLengthWithinLimit = true;

const chunks = highlightWords({
  text: content,
  query: searchQuery,
  clipBy: 3,
}).filter((chunk) => {
  if (!resultLengthWithinLimit) return false;

  resultLength += chunk.text.length;

  // Start filtering out chunks at 90 characters (approximately
  // 2 lines at 320px width and 14px font size), after the first
  // non-matching chunk is encountered.
  if (resultLength > 90 && !chunk.match) {
    resultLengthWithinLimit = false;
  }

  return true;
});

Query words with double spaces

https://codesandbox.io/s/highlight-words-vanilla-forked-qcgv7l?file=/src/index.js
This is an unexpected result.

Return Text Fragments for linking to highlights?

Hey @tricinel 👋 hope things are good with you!

I wanted to see whether you'd be open to also returning a Text Fragment (blog post) in addition to the chunks matched in a string.

Eg.

1. Returning the Text Fragment Modules in Web for usage in the URL below, for matching and scrolling to that part of the page:
   https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Modules%20in%20Web
   
   
   
2. Returning the Text Fragment details%20about%20the-,API,-%2C%20see%20Experimenting%20with for usage in the URL below, for matching a specific instance of API in the page:
   https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=details%20about%20the-,API,-%2C%20see%20Experimenting%20with
   

Ideas for implementation can be inspired by the doGenerateFragment function in fragment-generation-utils.js from the text-fragments-polyfill package:

https://github.com/GoogleChromeLabs/text-fragments-polyfill//blob/e5252cb6eba768cdc4166b27cbe8080fc67f37c7/src/fragment-generation-utils.js#L145-L243

Declaration file not found with `Node16` module + moduleResolution

Hi @tricinel 👋 Happy new year! Hope you are well.

I have been experimenting with the "module": "Node16" option in tsconfig.json recently and found the declaration file for highlight-words cannot be found when using these options:

Demo on StackBlitz (run yarn tsc in the terminal to get the error):

https://stackblitz.com/edit/node-gwywi8?file=package.json,tsconfig.json,yarn.lock

Error

The error message:

$ yarn tsc
index.ts:1:28 - error TS7016: Could not find a declaration file for module 'highlight-words'. '/home/projects/node-gwywi8/node_modules/highlight-words/dist/highlight-words.mjs' implicitly has an 'any' type.
  Try `npm i --save-dev @types/highlight-words` if it exists or add a new declaration (.d.ts) file containing `declare module 'highlight-words';`

1 import highlightWords from 'highlight-words';
                             ~~~~~~~~~~~~~~~~~


Found 1 error in index.ts:1

error Command failed with exit code 2.

Code

tsconfig.json

{
  "compilerOptions": {
    "module": "node16",
    "moduleResolution": "node16",
    "noEmit": true,
    "strict": true
  },
  "include": ["index.ts"]
}

package.json

{
  "name": "node-starter",
  "version": "0.0.0",
  "type": "module",
  "dependencies": {
    "highlight-words": "^1.2.1",
    "typescript": "^4.9.4"
  }
}

index.ts

import highlightWords from 'highlight-words';

console.log(highlightWords);