2017-02-21 57 views
0

regex-javascript 此代码无法正常工作。当我点击搜索按钮时,它没有显示任何东西。我需要下面的代码来突出显示单词的第一个字母。 使用正则表达式抛出错误的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{ 
 
\t background:yellow; 
 
\t 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>

它抛出的错误,当我点击搜索按钮

不工作...

+0

什么是你在控制台得到错误? – Tushar

+0

控制台没有错误,但无法获得所需的输出。 – Prasanna

回答

0

使用下面的脚本它应该工作不工作。假设你要跨越的<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>和它的文本之间的空间不被认为是
+0

太棒了!但是当我输入“j”时,它会突出显示带有“j”的所有单词。我需要的是它应该只强调j。 – Prasanna

+0

@Prasanna现在检查更新的代码 –

+0

天才!谢谢@Abdul Hameed – Prasanna

相关问题