Question

我有一个标准输入字段：

<input type='text' id='txt'>

让我们说内容是foo bar。

现在，我希望能够动态地使用javascript / jQuery突出显示单词＆＃39; bar＆＃39;在那个输入字段中。我尝试过使用$('#txt').setSelectionStart(5);或$('#txt').selectionStart(5);等内容，但似乎没有任何效果。我怎样才能做到这一点？所有示例都指向$('#txt').select()范围内的代码，但我需要能够从其他位置更改它。

修改通过突出显示我的意思是选择或突出显示一个单词的方式与选择单词的方式相同用鼠标编辑或复制。 我的意思只是简单地为单词着色。

第二次编辑整整一个上午过后，我终于成功了。按下箭头键时，我的大挂机并没有阻止默认。这是jsfiddle： http://jsfiddle.net/31mts93v/3/

Answer 1

输入类型文本或textarea中不允许使用html。

执行此操作的一种方法是使用内容可编辑div，然后搜索文本并为匹配的文本添加突出显示类。

对于前。

＆＃13;

$('#keyWord').on('input', function (e) {
    var text = $(this).val();
    // escaping string for use in regex
    text = text.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    var re = new RegExp(text, 'gi');
 
    $('#test').children().each(function () {
        // if no text input clear out previous .highlight spans
        if(!text){
            $(this).html($(this).text());
            return;
        }
        // if match for regex insert .highlight class
        $(this).html($(this).text().replace(re, function(match){
            return '<span class="highlight">'+ match   +'</span>';
        })); 
    });
});

＆＃13;

   .highlight{
  background: red;
}
#test{
  border: 1px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div contenteditable="true" id="test">
<p>This is bar</p>
</div>
</div>
Search text: <input type="text" id="keyWord" />

＆＃13;

Answer 2

选中此Link

这是一个jquery插件，这可能会帮助您实现结果。

我使用了一些字符串函数和setSelectionRange来选择文本框内的文本。

HTML

<input type="button" value="Select" onmousedown="selectCup(); return false">
 <input type="text" id="select_text">

的js

function selectCup() {

    var search_text = document.getElementById("select_text").value;
    var n = search_text.length;
    var input = document.getElementById("test");
    var input_text = input.value;
    var x = input_text.indexOf(search_text);
    var y = x+n;
    input.focus();
    input.setSelectionRange(x, y); // Highlights "Cup"
};

我在这个fiddle

中已经过时了

突出显示输入字段中的单词

2 个答案: