Question

当我在输入中键入“ hello”，“ Hello”，“ HELLO”等时，我希望文本带有颜色。当我使用字符串但不用作正则表达式时，它可以工作

<input id="input" type="input" value="hello"/>
<span id="result">Hello</span>

<script>   
var input = document.getElementById('input');
var result = document.getElementById('result');
function greenTheTitle(){

        result.style.color = 'green';
    }
function redTheTitle(){

        result.style.color = 'red';
    }

input.addEventListener('keyup', function goodMrn(){
    var inputValue = input.value;
    if(inputValue == /hello/i ){ //does'nt work here
            greenTheTitle();
        }
if(inputValue != /hello/i ){ //and here
            redTheTitle();
        }});    
</script>   

  </body>
</html>

if(inputValue == "hello" )有效但 if(inputValue == /hello/i )不是

Answer 1

您不能根据RegEx检查字符串是否相等。 RegEx是表示模式的对象，它不是字符串，不会强迫您使用。（尝试一下：打开开发人员控制台并输入/hello/i.toString()，您将只获得与输入值不匹配的字符串“ / hello / i”模式。）

您应该做的是使用正则表达式test或match函数。由于在这种情况下，您无需查找匹配的部分，因此可以使用test，如果字符串在某处匹配，则返回true，否则返回false。

if (/hello/i.test(inputValue)) { /* ... */ }

请注意，这也将在输入中的任何位置匹配字符串“ hello”，因此它将与“ well hello there”，“ dsjnbdjkasbdjhellojbasdjhsbja”等匹配。您可以通过在正则表达式的开头和结尾处固定锚点来解决此问题，像这样：

if (/^hello$/i.test(inputValue)) { /* ... */ }

这意味着“字符串以（^）开头，然后以（$）结尾”。或者，如果您只希望不区分大小写，那么也许您甚至不需要在这里使用RegEx。您可以只将输入小写并与小写字符串进行比较：

if (inputValue.toLowerCase() === 'hello') { /* ... */ }

在JavaScript中将字符串转换为正则表达式

1 个答案: