Question

我希望在加载页面时突出显示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中没有任何事情发生。我需要你的建议来解决这个问题。

Answer 1

这是因为您使用的代码只有在元素周围有一些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'),

Demonstration

Answer 2

我认为你要找的是突出显示单词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

基本的Javascript：搜索和突出显示

2 个答案: