最佳答案
这是一种方法,但它不是一些简洁而聪明的 jQuery - 主要是直接的 javascript。
<div id="content">hello, hello, hello</div>
<script type="text/javascript">
$(document).ready(function() {
var searchKey = "hello"; // text to search for in element
var elementToSearch = $("#content"); // jquery element with text to search for matches
var instanceToHighlight = 2; // 1-based; e.g. 3 = third instance found
highlightText(searchKey, elementToSearch, instanceToHighlight);
});
function highlightText(searchKey, elementToSearch, instanceToHighlight) {
var content = elementToSearch.html();
var highlightIndex = instanceToHighlight - 1;
var lastIndex = -1;
var i = 0;
// get the index in the overall text of the instance to highlight
while (i <= highlightIndex) {
lastIndex = content.indexOf(searchKey, lastIndex + 1);
i++;
}
var testValue = content.slice(lastIndex, lastIndex + searchKey.length);
if (testValue !== searchKey) {
return; // didn't find an actual match
}
// chop up the content string so that the <span> tag can be wedged in around the text to highlight
var contentBeforeHighlightText = content.substr(0, lastIndex);
var contentAfterHighlightText = content.substr(lastIndex + searchKey.length, content.length - 1);
highlightedText = "<span class=\"highlight\">" + searchKey + "</span>";
content = contentBeforeHighlightText + highlightedText + contentAfterHighlightText;
elementToSearch.html(content);
}
</script>
关于javascript - 使用jquery突出显示特定位置的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3420970/