用Mark.js标记整个句子

时间:2016-11-16 13:19:11

标签: javascript

2016年11月18日编辑:

我想基于一个简单的条件在textarea中标记整个句子(如果句子长于n个单词,则应标记文本)。

我对如何使用mark.js标记整个句子表示怀疑。在@dude的帮助下,这就是解决方案:

请参阅Mark long sentence with mark.js上Mark Buskbjerg(@MarkBuskbjerg)的笔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,
    });
});

通过设置“seperateWordSearch”:false 整个句子整体用mark.js标记

原帖: 我一直在使用https://markjs.io/来标记输入字段中的长字。

设置非常简单。

现在我正在尝试根据长度来标记整个句子。

麻烦的是,如果我插入一个字符串,MarkJS会遍历字符串中的每个单词并将它们与整个文本匹配。

只有当整个句子与MarkJS匹配时,有没有人会想到一种做标记的方法?

以下是我最接近的解决方案之一:)

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>

(上面的文字只是丹麦语的胡言乱语)

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",
    }); 
}

作为一个说明,我已经为此自己编写了这个功能。但是因为我在这个项目中已经使用了MarkJS作为其他东西,所以继续使用现有代码而不是生成新代码会很好:)

1 个答案:

答案 0 :(得分:1)

首先,似乎你正在混合使用jQuery和普通的JS。在提供的代码的末尾,您使用document.getElementById,而在顶部,您正在使用$(...)。如果你想使用jQuery,mark.js也可用于jQuery。

其次,您传递给mark.js的“文本”包含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

您应该只将文本传递给mark.js,因为<br />不是文本,当您打算使用下面提到的解决方案时,它不会找到任何匹配项。

由于你没有提到你想要做什么,我不能为你提供一个工作小提琴。

无论如何,您需要单独查找整个文本而不是包含单词的内容是指定separateWordSearch选项:

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