Question

正则表达式的JavaScript 这段代码不起作用。当我点击搜索按钮时，它没有显示任何内容。我需要以下代码来突出显示该单词的第一个字母。

var str1 = document.getElementById("test").innerHTML;
function startswithSearch() {
    var str = str1;
    var input = document.getElementById("query").value;
    if (input) {                                              
        var pattern = new RegExp("^(" + input + ")", "gim");
        str = str.replace(pattern, "<span>$1</span>");
        document.getElementById("test").innerHTML = str;
    }
}

span{
	background:yellow;
	font-weight:600;
}

<!DOCTYPE html>
<html>
<body>

<form action="" method="" id="search" name="search">
<input name="query" id="query" type="text" size="30" maxlength="30">

<input name="startswith" type="button" value="startswith" onClick="startswithSearch()">

</form></div>
<div id="test">
<ul>
  <li>abcd</li>
  <li>efgh</li>

</ul>

</div>
</body>

<script type="text/javascript" src="highlight_ts.js"></script>




</html>

单击搜索按钮

时出现错误而无法正常工作

不工作......

Answer 1

使用以下应该有效的脚本。假设您需要<li>元素的范围

<script>
var str1 = document.getElementById("test").innerHTML;
function startswithSearch() {
    var str = str1;

    var input = document.getElementById("query").value;

    if (input) {                                              
        var pattern = new RegExp("(<li>\s*)("+input+")(.*?<\/li>)", "gim");
        console.log(pattern);
        str = str.replace(pattern, "$1<span>$2</span>$3");
        console.log(str);
        document.getElementById("test").innerHTML = str;
    }
}
</script>

编辑：

更新了脚本以单独突出显示搜索词。因为你的功能是 startswith 我假设以下

搜索字词应出现在<li>元素的开头。
<li>与其文字之间的空格不被视为

Javascript使用正则表达式抛出错误

1 个答案: