javascript 如何高亮匹配到到的關(guān)鍵字
javascript 如何高亮匹配到到的關(guān)鍵字
偶然的你
2018-07-29 04:04:53
1 回答
qq_花開(kāi)花謝_0
TA貢獻(xiàn)1835條經(jīng)驗(yàn) 獲得超7個(gè)贊
用這個(gè)代碼就可以了。
<!DOCTYPE html>
<html>
<head>
<div id="content">
蘋果含有豐富的糖類、維生素、微量元素以及水溶性食物纖維和有機(jī)酸，是人們公認(rèn)的健康之果。不僅如此，蘋果還具有天然的怡人香氣，這種清香氣味對(duì)于人體來(lái)說(shuō)，有舒緩壓力、提神醒腦的功效，而蘋果中充足的礦物質(zhì)硼，也同樣可以使困倦的大腦快速恢復(fù)清醒狀態(tài)。喝杯咖啡不如吃個(gè)蘋果的道理就正在于此了
</div>
<input type="text" id="text" placeholder="請(qǐng)輸入關(guān)鍵字"/>
<input type="button" id="button" value="確定"/>
<script>
var content = document.getElementById("content");
var contents = content.innerHTML;
var text = document.getElementById("text");
var button = document.getElementById("button");
button.onclick = function() {
var value = text.value;
var values = contents.split(value);
content.innerHTML = values.join('<span style="background:#ff0000;">' + value + '</span>');
};
</script>
</body>
</html>
效果如下：
添加回答
舉報(bào)
0/150
提交
取消