在javascript中实现文本突出显示功能

Question

I have a task to create API using ExpressJS that will manage highlights which will be made on the frontend. How can I keep track of my highlighted text if someone updates a part of the text?

I was keeping the three starting and ending characters of the highlighted text. But a problem is, how will I manage those characters if the text is edited.

const { textH, allText } = req.body;
let chars = { };
const enclosingChars = (hLighted, theString) => {
  let startingChars = null, endingChars = null;
  const index = theString.indexOf(hLighted);
  const last3 = index + hLighted.length;
  if ((index - 3) > -1) startingChars = theString.substring(index - 3, index);
  if ((index + 3) <= theString.length) endingChars = theString.substring(last3, last3 + 3);
  return { startingChars, endingChars };
};
if (allText.includes(textH)) {
  chars = enclosingChars(textH, allText);
}
chars.hLighted = textH;

If a part of the highlighted text is edited, I will delete the highlighted in my storage. If not, I want to check if my starting and ending characters have changed, then I change them accordingly. But I don't know how to get that highlighted text if its index changed

Answer 1

so it will be not as easy as you think if you consider keeping track of edits outside of the highlighted text.

1. the text might contain more than one similar phrase/word (to the highlighted)
2. the newly inserted phrase might be similar to the highlighted one (worse if before the main one in terms of indices)

so if any of the above scenarios happens the indices will be of no use because you can fall to the wrong text

Do the following

a. when highlighting keep the following 1. the content : to make sure if the edit happens in there, you know it and you can act accordingly

   2. keep track of the index range of your text even in case the shift is required (when the text before it is edited)

   3. take a screenshot of the entire article and store it so that when an edit to the article happens you know exactly which part is edited. this will require to check word by word and see if any word in the new text is different from the word of the same index in the old (screenshot). and you can shift the ranges of the highlighted text accordingly.

Remember any edit that happens after the highlighted text is innocuous. Hope this helps.