将文本输入两个文本框并标记相同的单词

Question

我有两个字段 - input类型“text”和textarea。

如果input包含单词“dog”且textarea包含单词“underdog”，textarea中的“dog”应在{{div中标记为红色1}} id为“rslt”。

如何使用jQuery实现这一目标？

Answer 1

您可以使用search()或indexOf()找到相同的字词
查看此处：indexOf() - MDN，search() - MDN ...

但是你必须创建假的textarea来设置样式（重复单词的颜色） - 在这里查看Format text in a <textarea>?

如果你好奇地检查合并：http://www.mergely.com/editor - 没有任何textareas ......

Answer 2

您可以使用indexOf获取当前单词在字符串中的位置，然后在那里应用一些css。此代码处理多个单词突出显示。

function markText(text, word, index) {
        if (index != -1) {
            var left = text.substr(0, index);
            var current = word;
            var right = text.substr(index + word.length);
            var current = '<span style="background-color: red">' + current + '</span>';
            text = left + current + right;
            if (right.indexOf(word) >= 0) {
                text = markText(text, word, (left + current).length + right.indexOf(word));
            }
        }
        return text;
    }
    $('#btn').click(function () {
        if (($('#txtarea').val() == "") || ($('#bx').val() == "")) {
            $('#rslt').html('Please fill both boxes!');
            return;
        }
        var words = $('#bx').val().split(' ');
        var text = $('#txtarea').val();

        words.forEach(function (word) {
            if (text.indexOf(word) >= 0) {
                text = markText(text, word, text.indexOf(word));
            }
        });

        $("#rslt").html(text); //WHAT HERE?
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Write here:</p>
<input type="text" id="bx"/><br/>
<p>and here:</p>
<textarea cols="100" rows="8" id="txtarea"></textarea><br/>
<button id="btn">GO</button>
<hr/>
<div id="rslt"></div>