0

I have a block of plain text, and a list of start/end offsets for things I want to highlight. For example:

Hello StackOverflow, how are you?

[
  {
    start: 6,
    end: 19,
    desc: "A website where people can get help with programming questions"
  },
  ...
]

I want to add <span> tags into the text at the correct point, so that I can add a title onto the span with the description. Is there a library or easy approach to doing this using Javascript (specifically within the React framework, but I don't think that should make a difference).

James Baker
  • 1,143
  • 17
  • 39
  • Please share exactly the output that you wish to see – Isaac Feb 19 '21 at 11:47
  • 1
    Does this answer your question? [Inserting string at position x of another string](https://stackoverflow.com/q/4364881/15072974). You could insert ```""``` at index ```start``` and ```""``` at index ```end```. Though it would be better to insert the closing tag **before** the starting tag, otherwise if you add the closing tag after, the indexes of the string will be messed up and you'll have to compensate for adding a couple extra characters before it. –  Feb 19 '21 at 11:49
  • I was hoping for something that would take care of the compensating of extra characters for me, as I might have a number of annotations I want to insert and they may overlap - so if someone has already written a library for working all that out then that will make life easier! – James Baker Feb 19 '21 at 11:56
  • I am voting to close this question since it is asking for recommendations of resources rather than a specific problem, hence attracting opinionated answers. – Wais Kamal Feb 19 '21 at 11:58

0 Answers0