mark.jsにすでに強調表示されている別の用語の中にある用語を強調表示します

Question

テキストハイライトを行うためにmark.jsライブラリを使用しています。それはうまく動作しますが、どのようにして用語を2回強調することができますか？

ライブラリではハイライトのクラス名を指定できます。したがって、長期的に一度強調表示され、後でそのクラスの部分文字列をハイライトしたい場合CSSとは別のスタイル）、それは私が問題に遭うところです。私は "トレーニング・システムは" .orangeクラスを使用して強調され得ることに成功したのですが、私は得ることができない

<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

：私はこれを試してみました

.underlineクラスに従って、「システム」に下線が引かれています。

私は既に持っているクラスに追加のクラスを適用できないのはなぜですか？

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

idの場合のようにparentエレメントを渡します。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からmarkSubStringメソッドです。私はちょうどこれを行うための基本的な一般的な方法を書いた、それは改善することができます。