Marking text with unicodes

I’m using markjs in my project. This is basically used to highlight text. It works fine except for some text with unicode characters in it. For example text with characters “\xA0”

Here is the jsfiddle link for testing https://jsfiddle.net/trupti11/4zh3w0a8/2/

Here is the code sample

$(function() {
  alert($('.txtHolder').text())
//this shows the extra characters in the text '\xA0'
  alert($('.txtHolder').text().toSource());
//this does not work
   $('.txtHolder1').mark($('.txtHolder1').text());
//this works
   $('.txtHolder2').mark($('.txtHolder2').text());
});

Environment

• Browser FireFox 51
• mark.js

[Mottie]

Hi @pravid!

What are you trying to accomplish?

The txtHolder1 class doesn’t exist. And \xA0 is unicode for a non-breaking whitespace. This is ignored when you set the separateWordSearch option to true (default setting) because each key word is targeted separately.

[julmot]

@pravid You’ve now shown us your third JSFiddle, still with invalid HTML and invalid mark.js options. “lect” and “sen” are no valid HTML elements! I don’t like to debug your application to get something that can be used for tests.

Anyway, it didn’t work because you’re calling .mark() two times, with different strings, but with space at the end and the beginning in each of them. So, what happens is that if you mark the first sentence (that has multiple spaces at the end), it also wraps all blanks until .txtHolder2. And if you then try to mark the second keyword which also requires blanks at the beginning, then there are no blanks that can be wrapped, thus there is no match for the second keyword. If you pass blanks to mark.js they will be merged, but it’s still necessary to have at least one blank otherwise no match is found (introduced in #97). To solve this, just trim the keyword before you pass it along to mark.js, using string.trim().

This is you working fiddle.

In future, please provide one simple fiddle with valid HTML and a clear question. Thank you!