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

Question

我正在使用 mark.js图书馆为了做文本高亮。它工作正常，但我想知道如何突出显示一个术语两次。

该库允许用户为突出显示指定类名，所以据我了解，如果一个长术语被突出显示一次，稍后你想用不同的类突出显示该术语的子字符串(应用不同的style with 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 为“系统”添加下划线> 类。

为什么我不能在已有类(class)的基础上再申请一门类(class)？

Answer 1

这不是正确的做法， 但是由于无法使用 mark.js 标记已标记的项目，您可以执行如下操作以使其暂时工作:

Updated Fiddle

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 元素，如 #article 如果它是一个 id，需要标记的单词的索引在已经标记的实际字符串中 和需要添加的类名 到markSubString 方法。我刚刚写了一个基本的通用方法来做到这一点，它可以改进。