html 突出显示,使用JavaScript突出显示html文本

我正在开发一个函数来突出html内部的div,我已经检查过一些答案,但我没有找到任何解决方案,我的情况。事情是,我居然有功能不会在同一时间,例如与2双HTML标签的工作:使用JavaScript突出显示html文本

有了这个HTML代码:

Les malalties vasculars cerebrals (MVC)

conegudes també com a feridures o ictus representen la tercera causa de

而这个功能的使用jQuery

jQuery.fn.highlight = function(pat) {

function innerHighlight(node, pat) {

var skip = 0;

if (node.nodeType == 3) {

var pos = node.data.toUpperCase().indexOf(pat);

if (pos >= 0) {

var spannode = document.createElement('span');

spannode.className = 'highlight';

var middlebit = node.splitText(pos);

var endbit = middlebit.splitText(pat.length);

var middleclone = middlebit.cloneNode(true);

spannode.appendChild(middleclone);

middlebit.parentNode.replaceChild(spannode, middlebit);

skip = 1;

}

}

else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {

for (var i = 0; i < node.childNodes.length; ++i) {

i += innerHighlight(node.childNodes[i], pat);

}

}

return skip;

}

return this.length && pat && pat.length ? this.each(function() {

innerHighlight(this, pat.toUpperCase());

}) : this;

};

jQuery.fn.removeHighlight = function() {

return this.find("span.highlight").each(function() {

this.parentNode.firstChild.nodeName;

with (this.parentNode) {

replaceChild(this.firstChild, this);

normalize();

}

}).end();

};

列表项

如果我搜索: “莱斯” 的作品好。

如果我搜索:“feridures”作品罚款也。

但如果我搜索“com feridures”功能不higlight我的文本。

这是我需要完成我的应用程序的唯一事情。

2013-03-14

mcones

+7

“这是我需要完成我的aplication的唯一的事情。”著名遗言 –

2013-03-14 18:49:23

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 JavaScript 来实现在 HTML 进行关键字查询。以下是一个实现的示例代码: ```html <!DOCTYPE html> <html> <head> <title>Keyword Search</title> </head> <body> <h1>Keyword Search</h1> <label for="search-input">Enter keyword:</label> <input type="text" id="search-input"> <button id="search-button">Search</button> <p id="search-results"></p> <script> const searchInput = document.getElementById('search-input'); const searchButton = document.getElementById('search-button'); const searchResults = document.getElementById('search-results'); function searchKeyword(keyword) { // Get all the elements that can contain the keyword const searchElements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6'); // Loop through the elements and search for the keyword let resultCount = 0; searchElements.forEach(element => { if (element.textContent.includes(keyword)) { // Highlight the keyword in the element const highlightedText = element.textContent.replace(new RegExp(keyword, 'gi'), match => `<mark>${match}</mark>`); element.innerHTML = highlightedText; resultCount++; } }); // Display the number of search results const resultText = resultCount > 0 ? `${resultCount} results found.` : 'No results found.'; searchResults.innerHTML = resultText; } searchButton.addEventListener('click', event => { event.preventDefault(); const keyword = searchInput.value; searchKeyword(keyword); }); </script> </body> </html> ``` 这段代码包含了一个输入框和一个按钮,当用户点击按钮时,脚本会搜索 HTML 页面包含关键字的元素,并在文本使用 `<mark>` 标签突出显示关键字。此外,还会在页面上显示搜索结果的数量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值