Transform String into Array and Select matching words inside the textarea

Question

$('textarea').on('keyup', function(){
  var ths = $(this);
  var array = $(this).val().split(' ');
  array.forEach(function(value){
    if (value.match(/(threewords)/g)) {
        ths.val().select(value);
    }
  })
  
})

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

<textarea>word twowords threewords</textarea>

What I want to do is to select the matching text inside the textarea if it matches the .match(/(threewords)/g) if I wrote word,

The problem is that I keep getting that .match() is null if there is no match or getting select is not a function if the match exists, But nothing is selected and the error occurs, How can I do what i'm trying to do properly?

What is `.select()` supposed to do? What are you trying to do in this loop? — Kokogino, Apr 17 '18 at 13:48
@Kokogino I'm supposed to write multiple words, Then turn them into array for each word, After that I check if one of these words is equal to `word`, If it is Then I want to `select` it to change it. Like highlighting but `selecting` this specific word. — Toleo, Apr 17 '18 at 13:49
@Goran.it Tried it, It clears all the `textarea` then types the last value in the `array` only. I used `ths.val(value).select();` — Toleo, Apr 17 '18 at 13:53
@Kokogino Yes, but Highlighting seemed to require plugins, And in both cases the Highlighted text will be changed, So I thought selecting would be fit for this. — Toleo, Apr 17 '18 at 14:00
look, I don't think there is a straight forward way of programmatically selecting text (you will need plugins/tools), which seems to be what you are trying to do. after you match the text you want to select, [read on this](https://stackoverflow.com/a/6150060/4770813) — Scaramouche, Apr 17 '18 at 14:10

score 2 · Accepted Answer · answered Apr 17 '18 at 14:25

$('textarea').on('keyup', function(){
  var wordToSearch = 'threewords'
  var reg = new RegExp('\\b' + wordToSearch + '\\b')
  var indexStart = $(this).val().search(reg)
  if(indexStart >= 0){
    this.selectionStart = indexStart;
    this.selectionEnd = indexStart + wordToSearch.length;
  }
})

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

<textarea>word twowords threewords</textarea>

This code selects threewords if it is written in the textarea.

Gunnar Thoreson · Answer 2 · 2018-04-17T14:02:26.253

1

the match() function returns the matches in an array of strings, i put up an example to demonstrate it easier

try it like this:

$('button').on('click', function(){
    console.log('click');

  var tarea = $('textarea');
  var r = tarea.val().match(/(word)/g);
  console.log(r);
  console.log('jobs done');
});

try it out on jsfiddle

what else you then want to do depends on what you need, if you just want to know if there is a match you can simply do so by checking if the returned array is empty or not.

in this case i use a button to trigger the check for convenience

edit: version without button jsfiddle

edited Apr 17 '18 at 14:02

answered Apr 17 '18 at 13:54

Gunnar Thoreson

313
1
7

I checked using `if (value.match(/(threewords)/g))` the problem occurs in the `select`ing the inner text. – Toleo Apr 17 '18 at 13:58
@Toleo ok I think you only need to add word-boundary to the regex value.match(/\b(word)\b/g) http://refiddle.com/refiddles/5ad600fd75622d4f2f200000 – Thorgeir Apr 17 '18 at 14:18

score 1 · Answer 3 · answered Apr 17 '18 at 14:37

.select doesn't work like you are intending it to.

$("#target").select(value) is incorrect syntax. $("#target").select() is a valid syntax but it does not highlight anything it triggers the select event on an element with id 'target'.
The select event is fired when any text is selected, as in, clicked and dragged over by the mouse. It can be handled by attaching a handler to it:

Example:

    $( "#target" ).select(function() {
        $( "div" ).text( "Something was selected" ).show().fadeOut( 1000 );
    });

ths.val().select(value); part of your code is not a function indeed. Hence the error.

ths.val().select(); on the other hand ends up triggering the select event on the matched value which doesn't serve your purpose.

Transform String into Array and Select matching words inside the textarea

3 Answers3