모든 키워드가 콘텐츠에서 자동 강조 표시되도록 자바 스크립트를 변경하는 방법. 현재 사용자가 키워드를 클릭하면 키워드가 강조 표시됩니다. 자동으로 강조 표시하고 싶습니다. 그러나 나는 자바 스크립트를 변경하는 방법을 모릅니다.
<h3>Keywords</h3>
<ul id="keywords">
<li><span>AC</span> <span>Motors<span></li>
<li><span>Adjustable</span> <span>Speed</span> <span>Motor</span> <span>Drives<span></li>
</ul>
<h3>Sentences</h3>
<table style="font-size: 0.9em;">
<tr>
<td class="context">columbus fan & machine corp, dc industrial sales company, ac motors, dc motors, electric motor repair, electrical product servicing, cooling blowers, cooling blower filters, line/load reactors, electrical products, electric product distributors, power products, dc drives, electrical enclosures, electrical generators, electrical heaters, electric pumps, proximity switches, electrical transformers, electrical tachometers</td>
</tr>
<tr>
<td class="context">Columbus Fan & Machine corp is a <span class="featured-word">manunfacturer</span> of top quality Cooling Blowers and Filters along with other related motor accessories for all makes of AC & DC Motors</td>
</tr>
</table>
자바 스크립트 :
$(document).ready(function () {
var context = document.querySelectorAll('.context')
, keywords = document.querySelector('#keywords');
keywords.addEventListener('click', function (event) {
var target = event.target;
for(var i = 0; i < context.length; i++) {
var item = context[i]
, text = item.textContent
, featuredWords = item.querySelectorAll('.featured-word')
, words = Array.prototype.slice.call(featuredWords, 0).map(function(node) {
return node.textContent;
})
, regex = new RegExp('\\b(' + target.textContent + ')\\b', 'ig');
text = text.replace(regex, '<span class="highlight">$1</span>');
// put the bolded words back
words.forEach(function(word) {
text = text.replace(word, '<span class="featured-word">'+word+'</span>');
});
item.innerHTML = text;
}
}, false);
});
css :
.highlight {
background-color: yellow;
}
.featured-word {
color: red;
font-weight: bold;
}
.. 키워드의 '클릭'이벤트를 강조 표시하는 대신 아래와 같은 의미의 모든 키워드에 대해 창로드 자체에서 수행하면됩니다.
$(document).ready(function() {
var context = document.querySelectorAll('.context'),
keywords = document.querySelectorAll('ul#keywords li span');
Array.from(keywords).forEach(function(entry) {
for (var i = 0; i < context.length; i++) {
var item = context[i],
text = item.innerHTML,
featuredWords = item.querySelectorAll('.featured-word'),
words = Array.prototype.slice.call(featuredWords, 0).map(function(node) {
return node.textContent;
})
, regex = new RegExp('\\b(' + entry.innerHTML + ')\\b', 'ig');
text = text.replace(regex, '<span class="highlight">$1</span>');
// put the bolded words back
words.forEach(function(word) {
text = text.replace(word, '<span class="featured-word">' + word + '</span>');
});
item.innerHTML = text;
}
}, false);
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다