Javascript Basic:搜索和突出显示

Javascript Basic: Search and Highlight

本文关键字：显示 搜索 Basic Javascript      更新时间：2023-09-26

我想在加载页面时突出显示div中的一个单词。我的代码是

<script type="text/javascript">
function highlight(container,what,spanClass) {
    var content = container.innerHTML,
        pattern = new RegExp('(>[^<.]*)(' + what + ')([^<.]*)','g'),
        replaceWith = '$1<span ' + ( spanClass ? 'class="' + spanClass + '"' : '' ) + '">$2</span>$3',
        highlighted = content.replace(pattern,replaceWith);
    return (container.innerHTML = highlighted) !== content;
}
</script>
</head>
<body onload="highlight(document.getElementById('hello'),'florida','highlight');">
<div id="hello"> Florida florida orlando orlando</div>
Florida Texus florida 
</body>
</html>

在FF/Chrome/IE中什么都没有发生。我需要你的建议来解决这个问题。

这是因为您使用的代码只有在元素周围有一些HTML标记时才有效。

它将在更通用的情况下工作，例如，如果您将div更改为

<div id="hello"><p> Florida florida orlando orlanodo</p></div>

为了让它与HTML一起工作，你可以使用一个更简单的正则表达式：

new RegExp('(' + what + ')','g')

和一个不同的替代品：

replaceWith = '<span ' + ( spanClass ? 'class="' + spanClass + '"' : '' ) + '">$1</span>'

您也可以更改正则表达式，使组成为可选组：

pattern = new RegExp('(>[^<.]*)?(' + what + ')([^<.]*)?','g'),

演示

我想你要找的是突出显示单词florida，如果它是分开的，那么试试

function highlight(container,what,spanClass) {
    var content = container.innerHTML,
        pattern = new RegExp('''b(' + what + ')''b','g'),
        replaceWith = '<span ' + ( spanClass ? 'class="' + spanClass + '"' : '' ) + '">$1</span>',
        highlighted = content.replace(pattern,replaceWith);
    return (container.innerHTML = highlighted) !== content;
}

演示：Fiddle

相关文章：