请你实现一个js要求输入一个pre代码块时给其中的代码添加点击效果点击一个代码单词就会将这个代码块中的其它相同的单词标出注意是其他相同的也要标出
以下是一个实现上述要求的简单示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<pre id="code">
var a = 1;
var b = 2;
var c = 3;
var a = 4;
var b = 5;
var c = 6;
</pre>
<script>
var codeElement = document.getElementById("code");
var codeText = codeElement.innerHTML;
codeElement.innerHTML = codeText.replace(/\w+/g, function(match) {
return '<span class="word">' + match + '</span>';
});
var words = document.getElementsByClassName("word");
for (var i = 0; i < words.length; i++) {
words[i].addEventListener("click", function() {
var clickedWord = this.innerHTML;
for (var j = 0; j < words.length; j++) {
if (words[j].innerHTML === clickedWord) {
words[j].classList.toggle("highlight");
}
}
});
}
</script>
</body>
</html>
在上面的示例中,首先通过getElementById方法获取到pre元素,然后获取pre元素中的代码文本。接下来,使用正则表达式将每个单词用<span>标签包裹起来,并添加一个word类名。
然后,通过getElementsByClassName方法获取到所有具有word类名的元素,将它们存储在words数组中。然后,使用for循环为每个单词元素添加点击事件监听器。当单词被点击时,通过innerHTML属性获取到被点击的单词,然后遍历words数组,找到所有与被点击单词相同的单词元素,并给它们添加或移除highlight类名以实现高亮效果
原文地址: http://www.cveoy.top/t/topic/iMpQ 著作权归作者所有。请勿转载和采集!