markjs | A plug-in polygon annotation library

I am currently writing a Firefox extension that uses fuzzy search to highligth words on a web page.

The highlighting is done by creating a range that contains the match, then wrapping the content of the range around a custom element. This method from my perspective is equivalent to splitting the text node's text and copying it manually to a newly created node.

The pre-release version of the add-on works beautifully, however there's one type of css styling that I cannot deal with: display: flex; justify-content: space-between. The issue here is that when I partially wrap the content of a node styled as such, the rendered text loses its integrity.

Below you can find a simple demonstration. You can see that after 1 sec when the formatting starts, the 1st paragraph gets spaced out, while the 2nd one remains intact.

Could someone suggest a solution/workaround to this problem? I'd like to leave the web page's css intact so modifying the element's style is out of the question. I have checked mark.js API and it cannot handle this situation either. I wonder how the browser's built-in ctrl-f Highlight All searchbar deals with this..

I am using bootstrap carousel to make a website for a school project. I want the search input box to highlight all text on the page its on so I Googled and found mark.js : https://markjs.io/ And I looked at the Search bar with jump to matches example which leads me here: https://jsfiddle.net/bap5uf8e/ So I copied and pasted the html into index.html added all the basic elements like !DOCTYPE html, head and body, copied the css into a test.css and referenced to it in the of index.html. For the JS, I cloned the repo for mark.js and put it in my project folder so the tree looks like this:

I have just started using mark.js (https://markjs.io), and right now I am trying to find the right RegEx to capture as little data as possible (non-greedy type), and no more than a certain number of characters.

I tried multiple options, and so far I have these three regular expressions, but each has its own faults:

1. w(.{1,30})?3 - captures 'word1 word2 word3 wo rd3', instead of 'word3' and 'wo rd3';

2. w(\w{1,30})?3 - captures 'word3' as it should, but fails for 'wo rd3';

3. w((\w| ){1,30})?3 - this behaves exactly like the 1st option above.

For a better understanding, please run the code below.

What do you think, what am I missing here, please?

Alex

i am currently using mark.js for a google chrome extension to highlight some text on a web page.

Now whenever i refresh the page or do a right click all my marking is lost.

Is there a way to keep that marking? As far as i see mark.js does not change the DOM. I would like to mark the text but also be able e.g. when i print that page or save it as a pdf, to maintain the highlighting i did..

That is the way i mark. it is pretty much the same as instructed on https://markjs.io/:

What I'm trying to accomplish is highlight a text that given by parameter inside a raw text which format is HTML.

I'm working with Angular 7 and tried to do that jQuery functions and some third party libs but did not do that yet.

Here the scenario;

raw HTML text comes as below

I'm working on a jquery search (mark.js) that highlights words on a page based on user input. I'm able to highlight the results, but the results do not display i.e. "1 of 1 matches". The matches should appear in matches. I am not sure how to get it to work. Here is my JSFiddle:

I'm trying to highlight a query inside a text coming from an ajax response, before constructing HTML with it and pasting that into the DOM. Right now I'm using this code snippet:

I have a text block that is of a fixed width, and I'm trying to get each line of text's boundingClientRect. I'm wondering if the Selection api has a method for doing so that I'm just missing. Is there any simple way to get each line of a selected text?

I am trying to extent a mixin class in polymer. It works fine but as soon as I try to transpile my code with babel, I get Class constructor PolymerElement cannot be invoked without 'new. I get the error as soon as I call super. I am sure the problem has something to do with extend a native class with a transpiled class code but I could not yet find a resource/example that managed to solve my issue. My guess is that I need to configure my babel differently, but as I said, found examples did not help. You can access the repository where I am reproducing the error here: https://github.com/skukan159/DebuggingPolymerWebpack