-1

ページが読み込まれるときに 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 では何も起きていません。これを修正するには、あなたのアドバイスが必要です。

4

2 に答える 2

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'),

デモンストレーション

于 2013-07-01T08:12:10.457 に答える
1

あなたが探しているのは、単語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;
}

デモ:フィドル

于 2013-07-01T08:13:56.507 に答える