Mark Buskbjerg Mark Buskbjerg - 14 days ago 6
Javascript Question

Mark entire sentence with Mark.js

Edit 18th november 2016:

I wanted to mark entire sentences in a textarea based on a simple conditional (if sentence is longer than n-amount of words text should be marked).

I was in doubt on how to mark entire sentence with mark.js. With a little help from @dude this is the solution:

See the Pen Mark long sentence with mark.js by Mark Buskbjerg (@MarkBuskbjerg) on CodePen.



HTML

<div id="textArea" contenteditable="true">
Any text you want...
</div>


JavaScript

$(document).ready(function() {
var rawText = $("#textArea").html();
var sentenceArray = rawText.split(".");
var matchWarning = [];
var longSentence = 16;
var words;
var wordCounter;

for (var i in sentenceArray) {
words = sentenceArray[i].split(" ");
wordCounter = words.length;
if (wordCounter > longSentence) {
matchWarning.push(sentenceArray[i]);
}
}

$("#textArea").mark(matchWarning, {
"separateWordSearch": false,
});
});


By setting "seperateWordSearch": false the entire sentence as a whole is marked by mark.js

Original post:
I've been using https://markjs.io/ to mark long words from an input field.

The setup is quite simple.

Right now I'm trying to mark entire sentences based on length.

Trouble is that if I'm inserting a string MarkJS goes through each word in the string and matches them with the entire text.

Can anyone think of a way to do mark only if the entire sentence is a match with MarkJS?

Below is the one of my solutions which came closest :)

HTML:

<div id="myTextArea" contenteditable="true">
Indsæt din tekst her. Det her er bare en helt almindelig tekst, der ikke
besidder de store armbevægelser. Den har dog eksempelvis en meget lang
sætning, der mest af alt er lang, fordi der simpelthen skal være en rigtig
lang sætning, der kan udløse en alarm for lange sætninger, når dette
fantastiske stykke værktøj begynder at virke. Så nu er det bare i gang med
at skrue på javascript knapper, så skal der nok ske noget. Sig det så. Sig
hammertime.
</div>


(Above text is just danish gibberish)

JavaScript:

function warningLabel() {
var rawText = $("#myTextArea").html();
var sentenceArray = rawText.replace(/\n\r?/g, '<br />').split(". ");
var matchWarning = new Array();

for (var i in sentenceArray) {
if (sentenceArray[i].length > 100) {
matchWarning.push(sentenceArray[i]);
}
}

var instance = new Mark(document.getElementById("myTextArea"));
instance.mark(matchWarning.toString(), {
"accuracy": "exactly",
});
}


As a note I've already written the functionality for this myself. But since I use MarkJS for other stuff already in this project it would be nice to continue with existing code instead of producing new :)

Answer

First of, it seems that you're mixing jQuery and plain JS. At the end of the provided code you're using document.getElementById while at the top, you're using $(...). If you'd like to use jQuery, mark.js is also available for jQuery.

Secondly, the "text" you're passing to mark.js contains HTML:

Den har dog eksempelvis en meget lang <br />sætning, der mest af alt er lang, fordi der simpelthen skal være en rigtig <br />lang sætning, der kan udløse en alarm for lange sætninger, når dette <br />fantastiske stykke værktøj begynder at virke

You should only pass text to mark.js, as <br /> is no text and it'll not find any matches when you're going to use below mentioned solution.

As you haven't mentioned what you're trying to do, I can't provide a working fiddle for you.

Anyway, what you need to find the entire text and not the containing words separately is to specify the separateWordSearch option:

var instance = new Mark(document.getElementById("myTextArea"));
instance.mark(matchWarning.toString(), {
    "accuracy": "exactly",
    "separateWordSearch": false
}); 
Comments