question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ability to tag mark elements belonging to the same keyword when acrossElements = true

See original GitHub issue

I would like to request an enhancement request to allow tagging mark elements belonging to the same keyword occurrence when acrossElements is set to true.

For example, I would like to search for “1st OCT” and I turn on option acrossElements so the following occurrences could be found:

  • 1st OCT
  • 1st OCT (html code: 1<sup>st</sup> OCT )
  • 1st OCT (html code: 1st <b>OCT</b> )

Now, I would like to be able to correlate mark elements for each of the last 2 examples to know that they are coupled. I could use #each callback to add a custom attribute with magic value to mark elements of each occurrence, but the problem is that as it seems I’m not able to distinguish when to change the magic value between occurrences.

It would be nice to either add another callback option to be informed that the occurrence of keyword is about to be processed, or update #each callback to provide additional two parameters: fragmentCount, fragmentsTotal. Then I could update magic value each time when fragmentCount==fragmentsTotal.

The use case is to be able to handle right click on coupled elements and for example allow user to remove mark elements from the particular occurrence.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:9

github_iconTop GitHub Comments

5reactions
calibrcommented, Mar 14, 2019

That would be a useful feature if mark.js could return groups of mark nodes for every match rather than separate mark nodes it inserts in the DOM. We are developing a rich text editor and using mark.js to highligh search matches and faced the same problem as @pskowronek. I’ve slightly modified the “jump to matches” example to show the issue: https://jsfiddle.net/4hrk6v7s/. When you enter Lorem in the search box you will have two matches instead of a single match for the word Lorem, which is partially in bold.

example

A possible solution may by a callback option that triggers every time a whole match gets highlighted and receives the array of the inserted <mark> nodes

marker.mark("Lorem", {
  acrossElements: true,
  eachMatch: marks => {
    // now in marks we have an array of <mark> nodes that represent a single match
  }
})
1reaction
gsivulkacommented, Jul 6, 2020

This is an issue I’m also running into! Seconding the above.

Read more comments on GitHub >

github_iconTop Results From Across the Web

mark.js - Bountysource
Applications that match acrossElements may need a reliable way to determine which <mark > elements belong to the same match. For example a...
Read more >
The Mark Text element - HTML: HyperText Markup Language
The HTML element represents text which is marked or highlighted for ... Tag omission, None, both the starting and ending tag are mandatory....
Read more >
mark.js – JavaScript keyword highlight
mark.js is a text highlighter written in JavaScript. ... mark.js will wrap matches with a specified element and optionally with an assigned class....
Read more >
RFC 3261 SIP: Session Initiation Protocol - IETF
SIP makes use of elements called proxy servers to help route requests to the user's current location, authenticate and authorize users for services,...
Read more >
CSS Text Level 3 - W3C
Emphasis Mark Style: the ' text-emphasis-style ' property; 11.2.2. ... the element instead of just inside the opening and closing tags and, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found