Tengo dos campos: un input de tipo "texto" y un textarea.

Si el input contiene la palabra "perro" y el textarea contiene la palabra "desvalido", el "perro" en el textarea debe estar marcado en rojo en el div con la identificación "rslt".

¿Cómo puedo lograr esto con jQuery?

1
user7910922 25 abr. 2017 a las 12:28

2 respuestas

La mejor respuesta

Puede usar indexOf para obtener la posición de la palabra actual en una cadena y luego aplicar algunos css allí. Este código maneja el resaltado de múltiples palabras.

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>
0
Junius L. 25 abr. 2017 a las 12:03

Puede encontrar las mismas palabras con search() o indexOf()
Ver aquí: indexOf () - MDN, search () - MDN...

Pero debe crear un área de texto falsa para establecer estilos (color de la palabra duplicada): vea aquí ¿Dar formato al texto en un