javascript 如何高亮匹配到到的關鍵字
javascript 如何高亮匹配到到的關鍵字
偶然的你
2018-07-29 04:04:53
1 回答
qq_花開花謝_0
TA貢獻1835條經驗 獲得超7個贊
用這個代碼就可以了。
<!DOCTYPE html>
<html>
<head>
<div id="content">
蘋果含有豐富的糖類、維生素、微量元素以及水溶性食物纖維和有機酸，是人們公認的健康之果。不僅如此，蘋果還具有天然的怡人香氣，這種清香氣味對于人體來說，有舒緩壓力、提神醒腦的功效，而蘋果中充足的礦物質硼，也同樣可以使困倦的大腦快速恢復清醒狀態。喝杯咖啡不如吃個蘋果的道理就正在于此了
</div>
<input type="text" id="text" placeholder="請輸入關鍵字"/>
<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>
效果如下：
添加回答
舉報
0/150
提交
取消