用 Mark.js 标记整个句子

Question

2016 年 11 月 18 日编辑：

我想基于一个简单的条件标记文本区域中的整个句子（如果句子长于 n 个单词，则应该标记文本）。

我对如何用 mark.js 标记整个句子有疑问。在@dude 的帮助下，这就是解决方案：

请参阅 CodePen 上 Mark Buskbjerg (@MarkBuskbjerg) 的 Pen Mark long sentence with mark.js。

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 来处理其他东西，所以继续使用现有代码而不是生成新代码会很好:)

Answer 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
});