Question

当我在keypress事件中键入textarea时，我正在处理一个项目，我希望将每个单词大写。现在，我开始只使用SELECT，FROM和WHERE这几个词，默认情况下在MySQL中称为reserved word。

我创建了一个存储这些单词的数组。但是现在我面临的问题是如何在输入字母时获得整个单词。

我得到了一些stackoverflow线程的帮助，但是当你输入字母时，我无法得到任何帮助来获得整个单词的值。

实施例：原始字符串将是这样的 select name from accounts where id = '123'

当你在字符串上面输入时，结果应该是这样的 SELECT name FROM accounts WHERE id = '123'

直到现在，我能够将textarea中唯一一个单词大写，但是当我尝试输入整个sql时我无法做到。下面找到我正在使用的代码

$("#test").keyup(function () {
    var arr = ['SELECT', 'FROM', 'WHERE'];
    for (var i in arr) {
        if(arr[i].toUpperCase().indexOf($(this).val().toUpperCase()) == 0){
            $(this).val($(this).val().toUpperCase());
            break;
        }
    }
});

Answer 1

按空格分割字符串并映射结果数组，然后用空格

连接

＆＃13;

var $input = $("#test").on('input',function () {
    var arr = ['SELECT', 'FROM', 'WHERE'];
    $(this).val(function(_, currVal){
        return currVal.split(' ').map(function(word){
            return arr.includes(word.toUpperCase())? word.toUpperCase() : word;
        }).join(' ')
    })
})

// set value and trigger event for demo
$input.val("select name from accounts where id = '123'").trigger('input');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" style="width:100%">

＆＃13;

Answer 2

您可以使用正则表达式（忽略大小写）来替换val（）中的所有单词，如下所示：

$("#test").keyup(function () {
    var arr = ['SELECT', 'FROM', 'WHERE'];
    for (var i in arr) {
        // "i" ignores case and "g" makes the search global
        var regEx = new RegExp(arr[i], "ig");
        $(this).val($(this).val().replace(regEx, arr[i]));
    }
});

Answer 3

您可以将单词bourdaries \b与正则表达式一起使用，并使用input甚至检测字符串的复制粘贴

$("#test").on('input', function() {
  var arr = ['SELECT', 'FROM', 'WHERE'];
  let elem = $(this);
  for (var i = 0; i < arr.length; i++) {
    let regex = new RegExp('\\b(' + arr[i] + ')\\b', "gi");
    elem.val(elem.val().replace(regex, arr[i]));
  }
});

textarea {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="test"></textarea>

如何在jquery keypress事件中获得整个单词（而不是整个值）？

3 个答案: