Javascript 正则表达式搜索答案

【问题标题】：Javascript RegExp searchJavascript 正则表达式搜索
【发布时间】：2011-11-06 11:10:08
【问题描述】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

str = "This is an apple and I love it.";

function searching(query){
    var patt = new RegExp(query,"gi");
    var query = "<span style='color: red'>"+query+"</span>";
    document.getElementById("text").innerHTML = str.replace(patt,query);
    return str = document.getElementById("text").innerHTML;
    }

/*
patt1 = new RegExp("is","gi");
patt2 = /\san\s/gi;
document.write(str.replace(patt2,"<span style='color:red'> are </span>"));
*/
</script>
</head>
<body>
<div id="text"><script>document.write(str)</script></div>
<form>
<input type="text" id="querys" value="" onkeyup="searching(this.value)" />
</form>
</body>
</html>

我希望在每次搜索后，结果都会用高亮（红色）替换原始字符串。例如，我第一次搜索“苹果”。 “apple”在字符串中突出显示。返回带有红色突出显示的 div 中的字符串。第二次，我搜索“是” "is" 在字符串中以红色突出显示。

我尝试使用 innerHTML，但 innerHTML 也会返回内联 CSS 样式标签。

【问题讨论】：

标签： javascript regex

【解决方案1】：

我不明白这行的目的：

return str = document.getElementById("text").innerHTML;

str 是否在其他地方使用？在这种情况下，您可能需要保留两个单独的变量：一个用于原始字符串（您将对其进行搜索），另一个用于带有<span> 标签的修改后的字符串。

【讨论】：

没有。在 str 被突出显示的文本替换后，我只想将 str 设置为新的 str 。新的搜索基于突出显示的文本。我的初衷是搜索最后一个突出显示的搜索结果。
@TinAmaranth：对不起，我完全不明白你想要做什么。 :-/
首先，用户搜索“string1”；其次，字符串“string1”在文本中用“黄色”颜色突出显示；三、用户搜索“string2”；第四，突出显示“string2”。关键是最后突出显示的文本（“string1”）仍然存在。现在我的情况是用户搜索 string2 后突出显示的 string1 消失了。
我不认为你可以按照你已经布置的方式连贯地做到这一点。您在键位上执行所有这些操作，用户无法指示给定的搜索字符串已完成；所以“首先，用户搜索'string1'”，实际上是指“首先，用户搜索's'，然后是'st'，然后是'str'......”。这本身不是问题，但是如果您仍然突出显示所有旧的搜索字符串，那么即使用户输入了所有“string1”，每次出现的“s”都会保持突出显示。
所以...保持旧的搜索突出显示是不可能的？