Input
Editors
Data
Charts & Maps
Panel & Layout
Overlay & Feedback
Media
Misc
Resources
MarkText Matching
MarkText highlights search terms within specified containers using mark.js by Julien Royer. These examples compare the options that control how a search term matches the text.
Case Sensitivity
With caseSensitive="true" the search is case-sensitive; with false it is case-insensitive.
Separate Word Search
With separateWordSearch="true" each word is searched separately; with false the exact phrase is searched.
Accuracy Levels
accuracy="partially" matches if the search term is contained in the text, exactly only if the text
equals the search term, complementarily if the search term contains the text.
Usage
<style>
.marktext-highlight,
mark {
background-color: yellow !important;
color: black !important;
}
</style>
<div class="card">
<h5>Case Sensitivity</h5>
<p>With <code>caseSensitive="true"</code> the search is case-sensitive; with <code>false</code> it is case-insensitive.</p>
<h:form id="formCaseSensitivity">
<h:panelGrid columns="3" cellpadding="4">
<h:outputText value="Search term:"/>
<p:inputText id="searchInput" value="#{markTextController.searchTermCaseSensitivity}" placeholder="Enter search term">
<p:ajax event="keyup" delay="500" update="caseSensitivePanel caseInsensitivePanel markTextCaseSensitive markTextCaseInsensitive"/>
</p:inputText>
<p:commandButton value="Highlight" update="caseSensitivePanel caseInsensitivePanel markTextCaseSensitive markTextCaseInsensitive" icon="pi pi-search"/>
</h:panelGrid>
<h:panelGrid columns="2" style="width: 100%">
<p:panel id="caseSensitivePanel" header="Case Sensitive (caseSensitive=true)" style="margin-right: 10px">
<h:panelGroup id="caseSensitiveContent" layout="block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</h:panelGroup>
</p:panel>
<p:panel id="caseInsensitivePanel" header="Case Insensitive (caseSensitive=false)">
<h:panelGroup id="caseInsensitiveContent" layout="block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</h:panelGroup>
</p:panel>
</h:panelGrid>
<pe:markText id="markTextCaseSensitive" for="caseSensitiveContent" value="#{markTextController.searchTermCaseSensitivity}" styleClass="marktext-highlight" caseSensitive="true"/>
<pe:markText id="markTextCaseInsensitive" for="caseInsensitiveContent" value="#{markTextController.searchTermCaseSensitivity}" styleClass="marktext-highlight" caseSensitive="false"/>
</h:form>
</div>
<div class="card">
<h5>Separate Word Search</h5>
<p>With <code>separateWordSearch="true"</code> each word is searched separately; with <code>false</code> the exact phrase is searched.</p>
<h:form id="formSeparateWordSearch">
<h:panelGrid columns="3" cellpadding="4">
<h:outputText value="Search term:"/>
<p:inputText id="searchInput" value="#{markTextController.searchTermSeparateWord}" placeholder="Enter search term">
<p:ajax event="keyup" delay="500" update="separateWordPanel exactPhrasePanel markTextSeparateWord markTextExactPhrase"/>
</p:inputText>
<p:commandButton value="Highlight" update="separateWordPanel exactPhrasePanel markTextSeparateWord markTextExactPhrase" icon="pi pi-search"/>
</h:panelGrid>
<h:panelGrid columns="2" style="width: 100%">
<p:panel id="separateWordPanel" header="Separate Word Search (separateWordSearch=true)" style="margin-right: 10px">
<h:panelGroup id="separateWordContent" layout="block">
<p>This is a word search example. The word is here, and search is there. Word search together in this sentence.</p>
</h:panelGroup>
</p:panel>
<p:panel id="exactPhrasePanel" header="Exact Phrase Search (separateWordSearch=false)">
<h:panelGroup id="exactPhraseContent" layout="block">
<p>This is a word search example. The word is here, and search is there. Word search together in this sentence.</p>
</h:panelGroup>
</p:panel>
</h:panelGrid>
<pe:markText id="markTextSeparateWord" for="separateWordContent" value="#{markTextController.searchTermSeparateWord}" styleClass="marktext-highlight" separateWordSearch="true"/>
<pe:markText id="markTextExactPhrase" for="exactPhraseContent" value="#{markTextController.searchTermSeparateWord}" styleClass="marktext-highlight" separateWordSearch="false"/>
</h:form>
</div>
<div class="card">
<h5>Accuracy Levels</h5>
<p>
<code>accuracy="partially"</code> matches if the search term is contained in the text, <code>exactly</code> only if the text
equals the search term, <code>complementarily</code> if the search term contains the text.
</p>
<h:form id="formAccuracyLevels">
<h:panelGrid columns="3" cellpadding="4">
<h:outputText value="Search term:"/>
<p:inputText id="searchInput" value="#{markTextController.searchTermAccuracy}" placeholder="Enter search term">
<p:ajax event="keyup" delay="500" update="partiallyPanel exactlyPanel complementarilyPanel markTextPartially markTextExactly markTextComplementarily"/>
</p:inputText>
<p:commandButton value="Highlight" update="partiallyPanel exactlyPanel complementarilyPanel markTextPartially markTextExactly markTextComplementarily" icon="pi pi-search"/>
</h:panelGrid>
<h:panelGrid columns="3" style="width: 100%">
<p:panel id="partiallyPanel" header="Partially (accuracy='partially')" style="margin-right: 10px">
<h:panelGroup id="partiallyContent" layout="block">
<p>ips sum ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</h:panelGroup>
</p:panel>
<p:panel id="exactlyPanel" header="Exactly (accuracy='exactly')" style="margin-right: 10px">
<h:panelGroup id="exactlyContent" layout="block">
<p>ips sum ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</h:panelGroup>
</p:panel>
<p:panel id="complementarilyPanel" header="Complementarily (accuracy='complementarily')">
<h:panelGroup id="complementarilyContent" layout="block">
<p>ips sum ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</h:panelGroup>
</p:panel>
</h:panelGrid>
<pe:markText id="markTextPartially" for="partiallyContent" value="#{markTextController.searchTermAccuracy}" styleClass="marktext-highlight" accuracy="partially"/>
<pe:markText id="markTextExactly" for="exactlyContent" value="#{markTextController.searchTermAccuracy}" styleClass="marktext-highlight" accuracy="exactly"/>
<pe:markText id="markTextComplementarily" for="complementarilyContent" value="#{markTextController.searchTermAccuracy}" styleClass="marktext-highlight" accuracy="complementarily"/>
</h:form>
</div>
package org.primefaces.extensions.showcase.controller.marktext;
import java.io.Serial;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import org.primefaces.extensions.event.MarkEvent;
import org.primefaces.extensions.model.marktext.MarkPosition;
/**
* MarkText Controller.
*
* @author jxmai
*/
@Named
@ViewScoped
public class MarkTextController implements Serializable {
@Serial
private static final long serialVersionUID = 1L;
private String searchTerm = "ipsum";
private String searchTerm2 = "dolor";
private String customStyleClass = "custom-highlight";
private String searchTermCaseSensitivity = "Ut";
private String searchTermSeparateWord = "search is there";
private String searchTermAccuracy = "am";
private String searchTermUpdate = "lorem";
private String replaceTerm = "ipsum";
private String processedText = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
PrimeFaces Extensions provides additional components for PrimeFaces.\
MarkText is a new component that highlights search terms within specified containers using mark.js.""";
private List<String> lastMatchedTerms = new ArrayList<>();
private List<MarkPosition> lastPositions = new ArrayList<>();
private String lastMatchedTermsJson;
private String lastPositionsJson;
public String getSearchTerm() {
return searchTerm;
}
public void setSearchTerm(String searchTerm) {
this.searchTerm = searchTerm;
}
public String getSearchTerm2() {
return searchTerm2;
}
public void setSearchTerm2(String searchTerm2) {
this.searchTerm2 = searchTerm2;
}
public String getCustomStyleClass() {
return customStyleClass;
}
public void setCustomStyleClass(String customStyleClass) {
this.customStyleClass = customStyleClass;
}
public String getSearchTermCaseSensitivity() {
return searchTermCaseSensitivity;
}
public void setSearchTermCaseSensitivity(String searchTermCaseSensitivity) {
this.searchTermCaseSensitivity = searchTermCaseSensitivity;
}
public String getSearchTermSeparateWord() {
return searchTermSeparateWord;
}
public void setSearchTermSeparateWord(String searchTermSeparateWord) {
this.searchTermSeparateWord = searchTermSeparateWord;
}
public String getSearchTermAccuracy() {
return searchTermAccuracy;
}
public void setSearchTermAccuracy(String searchTermAccuracy) {
this.searchTermAccuracy = searchTermAccuracy;
}
public String getSearchTermUpdate() {
return searchTermUpdate;
}
public void setSearchTermUpdate(String searchTermUpdate) {
this.searchTermUpdate = searchTermUpdate;
}
public String getReplaceTerm() {
return replaceTerm;
}
public void setReplaceTerm(String replaceTerm) {
this.replaceTerm = replaceTerm;
}
public String getProcessedText() {
return processedText;
}
public void setProcessedText(String processedText) {
this.processedText = processedText;
}
public List<String> getLastMatchedTerms() {
return lastMatchedTerms;
}
public List<MarkPosition> getLastPositions() {
return lastPositions;
}
public void onHighlight(MarkEvent event) {
this.lastMatchedTerms = event.getMatchedTerms();
this.lastPositions = event.getPositions();
this.lastMatchedTermsJson = lastMatchedTerms.toString();
this.lastPositionsJson = lastPositions.stream()
.map(MarkPosition::toString)
.collect(Collectors.joining(", "));
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO, "Mark Event Triggered",
"Found " + lastMatchedTerms.size() + " matched terms and " + lastPositions.size() + " positions."));
}
public String getProcessedTextFirstPart() {
return processedText.split("\n\n")[0];
}
public String getProcessedTextSecondPart() {
return processedText.split("\n\n")[1];
}
public String getLastMatchedTermsJson() {
return lastMatchedTermsJson;
}
public void setLastMatchedTermsJson(String lastMatchedTermsJson) {
this.lastMatchedTermsJson = lastMatchedTermsJson;
}
public String getLastPositionsJson() {
return lastPositionsJson;
}
public void setLastPositionsJson(String lastPositionsJson) {
this.lastPositionsJson = lastPositionsJson;
}
}