我必須在我的項目中實現(xiàn)查找和替換功能。在此功能中，contentedita ble div頂部有一個查找和替換按鈕。當用戶點擊這個按鈕時，一個彈出窗口將打開，并要求在指定詞時搜索單詞，并按下查找將只在該div中查找單詞。如果發(fā)現(xiàn)任何匹配，它將突出顯示該詞。如何在div中突出顯示word？
<div id="test" contenteditable="true">
this is test <font class='classname'> some text test</font>
</div>我只想強調(diào)測試這個詞，其他什么都不想強調(diào)。
您需要搜索整個div來找到這個單詞，然后將這個單詞放入一個span中，并更改span的背景顏色。
編輯:我剛剛注意到你沒有使用CSS，所以你需要插入一個字體標簽來改變顏色。
這是我從文檔工具Sphix上偷來的:
/**
* highlight a given string on a jquery object by wrapping it in
* span elements with the given class name.
*/
jQuery.fn.highlightText = function(text, className) {
function highlight(node) {
if (node.nodeType == 3) {
var val = node.nodeValue;
var pos = val.toLowerCase().indexOf(text);
if (pos >= 0 && !jQuery.className.has(node.parentNode, className)) {
var span = document.createElement("span");
span.className = className;
span.appendChild(document.createTextNode(val.substr(pos, text.length)));
node.parentNode.insertBefore(span, node.parentNode.insertBefore(
document.createTextNode(val.substr(pos + text.length)),
node.nextSibling));
node.nodeValue = val.substr(0, pos);
}
}
else if (!jQuery(node).is("button, select, textarea")) {
jQuery.each(node.childNodes, function() {
highlight(this)
});
}
}
return this.each(function() {
highlight(this);
});
}
/**
* helper function to hide the search marks again
*/
hideSearchWords : function() {
$('.sidebar .this-page-menu li.highlight-link').fadeOut(300);
$('span.highlight').removeClass('highlight');
},
/**
* highlight the search words provided in the url in the text
*/
highlightSearchWords : function() {
var params = $.getQueryParameters();
var terms = (params.highlight) ? params.highlight[0].split(/\s+/) : [];
if (terms.length) {
var body = $('div.body');
window.setTimeout(function() {
$.each(terms, function() {
body.highlightText(this.toLowerCase(), 'highlight');
});
}, 10);
$('<li class="highlight-link"><a href="javascript:Documentation.' +
'hideSearchWords()">' + _('Hide Search Matches') + '</a></li>')
.appendTo($('.sidebar .this-page-menu'));
}
},因此，將這個詞添加到站點的js文件中，任何帶有這個詞的頁面，只要收到一個highlight GET參數(shù)，就會在頁面中搜索并高亮顯示這個詞。 您可以在以下位置找到工作代碼的演示:
http://sphinx.pocoo.org/intro.html?highlight=python注意:這段代碼需要jQuery，當然...
使用原型庫實際上很容易:
<html>
<head>
<style type="text/css">
#content span {
background-color: yellow;
}
</style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
Event.observe(window,'load',function(){
var htm = $('content').innerHTML;
$('content').innerHTML = htm.sub('my','<span>my</span>');
});
</script>
</head>
<body>
<div id="content">
This is the div containing my content.
</div>
</body>
</html>這應該讓你開始，這樣你就可以實現(xiàn)其余的。
為了突出一個單詞，你必須以某種方式選擇它。一種選擇是用span標記將單詞括起來。
this is <span class="highlight">test</span> some text test然后為突出顯示類指定CSS。
下一篇vue 路由間通信