jQuery Regex Replace String in Textarea on Key Up

Question

I think I'm really close. How can I get the "newtitle" variable to match what is typed in the Title field?

See exactly: https://jsfiddle.net/a0cj8xmy

jQuery:

var newtitle = 'This works but isn\'t what I type';
//var newtitle = $('$title-field').text(); // This doesn't work
//var newtitle = $('$title-field').html(); // This doesn't work
//var newtitle = $('$title-field').val(); // This doesn't work

$('#title-field').bind('keyup', function(){
  $('#body-field').html($('#body-field').html().replace(/title=""/g,'title="'+newtitle+'"')); 
});

HTML:

Title:<br>
<input type="text" id="title-field" placeholder="Type here!">

Body:<br>
<textarea id="body-field" name="body[und][0][value]" cols="60" rows="10">
<a href="" title=""><img src="" class="" /></a>
</textarea>

Good eye, but var newtitle = $('#title-field').val(); still doesn't seem to work. — WebMW
– WebMW, Commented Sep 19, 2018 at 12:13
You have to know that .val() returns a string, which is copied (and not a reference). You will need to fetch the new title in the listener — Seblor
– Seblor, Commented Sep 19, 2018 at 12:18

Seblor · Accepted Answer · 2018-09-19 12:38:25Z

1

After the comments we had on @ArunKumar's answer, I refactored the whole code. Also I stripped the jQuery parts :

const titleField = document.getElementById('title-field'),
  bodyField = document.getElementById('body-field');

titleField.addEventListener('keyup', () => {
  bodyField.value = bodyField.value.replace(/title=".*?"/g, `title="${titleField.value}"`);
})

First I save the 2 HTML elements for easier use. Then, I add the event listener, and inside the listener, I change the value of the textArea element by replacing the relevent part.

Now you can edit the textArea inner text as you want, and you will still be able to change the title attribute (or all title attributes, as the RegExp has the global tag).

Edit : as from your last comment, you can add the readonly attribute on the textArea HTML element so that it cannot be manually modified.

answered Sep 19, 2018 at 12:38

Seblor

7,1771 gold badge30 silver badges48 bronze badges

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

1 Comment

WebMW Over a year ago

this is excellent! Thank you for helping develop both answers-- I appreciate your time on this! Thanks also to Arun Kumar for helping pave the way.

Arun Kumar · Accepted Answer · 2018-09-19 12:45:52Z

1

You are not using id selector # to get value and get value inside keyup function not outside or just not use any var for this use direct value

Also the Regular Expression will only match if the title is empty, so it has been changed to match all characters between the quotes.

var areaVal=$('#body-field').val();
$('#title-field').keyup(function(){
  if($('#body-field').val().indexOf("<a")==-1)
     $('#body-field').val(areaVal);
   $('#body-field').val($('#body-field').val().replace(/title=".*?"/g,'title="'+$(this).val()+'"'));
 });

edited Sep 19, 2018 at 12:45

answered Sep 19, 2018 at 12:12

Arun Kumar

8955 silver badges12 bronze badges

16 Comments

WebMW Over a year ago

Good eye on the $ vs #, but this doesn't seem to work... any idea?

Arun Kumar Over a year ago

updated my answer. You need to get value inside keyup function

Seblor Over a year ago

You could keep the newTitle variable scoped to the listener and define it inside.

Arun Kumar Over a year ago

I think there is no need to use var

Seblor Over a year ago

@WebMW That issue is from the regex. Change /title=""/g to /title=".*?"/g

|

Collectives™ on Stack Overflow

jQuery Regex Replace String in Textarea on Key Up

2 Answers 2

1 Comment

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related