Question

我正在使用mark.js库来进行文字突出显示。它工作正常，但我想知道我怎么能两次强调一个术语。

该库允许用户指定突出显示的类名称，因此根据我的理解，如果长期突出显示一次，之后您想要使用不同的类突出显示该术语的子字符串（以应用不同的类别）风格与css），这是我遇到麻烦的地方。

我试过这个：

<div id="article">
  This is a dummy text including used in training systems
</div>

然后

longTerms = ["training systems"]
shortTerms = ["systems"]

longTerms.forEach(function(term) {

  $("#article").mark(term, {
    "className": "orange",
    "separateWordSearch": false,
    "accuracy": "exactly",
    "acrossElements": true
  });

});

shortTerms.forEach(function(term) {

  $("#article").mark(term, {
    "className": "underline",
    "separateWordSearch": false,
    "accuracy": "exactly",
    "acrossElements": true
  });

});

JSFiddle with the CSS

我在使用.orange类突出显示“训练系统”方面取得了成功，但我无法根据.underline类强调“系统”。

为什么我不能在我已有的课程上申请额外课程？

Answer 1

这不是一种正确的做法，但由于无法使用getBluetoothClass标记已标记的项目，您可以执行以下操作以使其暂时运行：

Updated Fiddle

mark.js

传递longTerms = ["training systems"] shortTerms = ["systems"] longTerms.forEach(function(term) { $("#article").mark(term, { "className": "orange", "separateWordSearch": false, "accuracy": "exactly", "acrossElements": true }); }); markSubString('#article', 1 , 'orange underline'); function markSubString (parent, subStringIndex, classes) { var subElement = ' <mark data-markjs="true" class="' + classes + '">'; var markedElement = $(parent + ' mark'); var textToMark = markedElement[0].textContent; var allSubStrings = textToMark.split(' '); var newText = ''; markedElement.text(''); for(var i = 0; i < allSubStrings.length; i++){ if(i === subStringIndex){ newText += subElement + allSubStrings[i] + ' </mark>'; } else { newText += allSubStrings[i] + ' '; } } markedElement.append(newText); }元素，如parent，如果它是id，#article和index of the word that needs to be marked inside the actual string that has already been marked到class names that needs to be added方法。我刚刚写了一个基本的通用方法来做到这一点，它可以改进。

在mark.js中突出显示另一个已突出显示的术语中的术语

1 个答案: