Question

<!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样式标记。

Answer 1

我不明白这一行的目的：

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

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

Javascript RegExp搜索

1 个答案: