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
– Kokogino, Commented Apr 17, 2018 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
– Toleo, Commented Apr 17, 2018 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
– Toleo, Commented Apr 17, 2018 at 13:53

Kokogino · Accepted Answer · 2018-04-17 14:25:10Z

2

$('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.

answered Apr 17, 2018 at 14:25

Kokogino

1,0861 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gunnar Thoreson · Accepted Answer · 2018-04-17 14:02:26Z

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, 2018 at 14:02

answered Apr 17, 2018 at 13:54

Gunnar Thoreson

3131 silver badge7 bronze badges

2 Comments

Toleo Over a year ago

I checked using if (value.match(/(threewords)/g)) the problem occurs in the selecting the inner text.

Thorgeir Over a year ago

@Toleo ok I think you only need to add word-boundary to the regex value.match(/\b(word)\b/g) refiddle.com/refiddles/5ad600fd75622d4f2f200000

Parama Kar · Accepted Answer · 2018-04-17 14:37:36Z

.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.

Collectives™ on Stack Overflow

Transform String into Array and Select matching words inside the textarea

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related