当按下按钮时,显示高亮显示的单词所在的行数,可以通过以下步骤实现:
以下是一个示例代码,演示如何实现上述功能:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
.line-number {
display: inline-block;
width: 30px;
text-align: right;
margin-right: 10px;
color: gray;
}
</style>
</head>
<body>
<textarea id="textArea" rows="10" cols="50"></textarea>
<button onclick="highlightLines()">Highlight Lines</button>
<div id="output"></div>
<script>
function highlightLines() {
var textArea = document.getElementById("textArea");
var lines = textArea.value.split("\n");
var keyword = "highlight"; // 要高亮显示的单词
var output = document.getElementById("output");
output.innerHTML = ""; // 清空输出区域
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
var lineNumber = i + 1;
if (line.includes(keyword)) {
var highlightedLine = line.replace(keyword, '<span class="highlight">' + keyword + '</span>');
output.innerHTML += '<div><span class="line-number">' + lineNumber + '</span>' + highlightedLine + '</div>';
} else {
output.innerHTML += '<div><span class="line-number">' + lineNumber + '</span>' + line + '</div>';
}
}
}
</script>
</body>
</html>
在上述示例代码中,我们创建了一个文本区域和一个按钮。当点击按钮时,调用highlightLines()函数,实现高亮显示和行数显示的功能。输出区域使用一个<div>元素来显示每一行的内容,行数使用一个<span>元素来显示,并应用了相应的CSS样式。
请注意,以上示例代码仅为演示目的,实际应用中可能需要根据具体需求进行适当的修改和优化。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云