Jquery code breaks when using replace() function

Question

I have a simple code that is separating book title from serial using the ":" as separator. This is really a straight forward solution and should work. On my website it's working but stopping when using german umlauts in the book title. So I created a JSFiddle to find out what's going on but the code breaks whenever I'm using the replace() function.

html:

<div id="title">Die Träne des Fressers: Weiße Königin</div>
Title:<div id="output_title">output title</div>
Serial:<div id="output_serial">output serial</div>

js:

title_input = $("#title").text(); 

title   = title_input.match(/[a-z\s,äöüß-]*.*:/i);
serial  = title_input.match(/:\s?[a-z\s,äöüß-]*/i);

title.replace(/\:/g,'');
//serial = serial.replace(/[:|\.]+/g, "").trim();

$("#output_title").text(title);
$("#output_serial").text(serial);

I do not understand what's going on. Could someone explain it to me?

The .replace() method returns a new string. It does not change the original string. — Pointy
– Pointy, Commented Nov 16, 2015 at 17:14
Oh, also, the .match() function always returns an array, not a string. The first element of the array (element 0) will contain the matched substring. — Pointy
– Pointy, Commented Nov 16, 2015 at 17:16
I missed that fact, you're perfectly right and thanks for pointing me out that .match() returns an array - this is new to me. — Hexodus
– Hexodus, Commented Nov 16, 2015 at 20:47

War10ck · Accepted Answer · 2015-11-16 17:21:13Z

3

The problem is that .match() is returning an array not a string as you're expecting. You'll need to check for this and select the matching string (if applicable) before calling .replace().

Currently by adding a bit of logging:

title_input = $("#title").text(); 

title   = title_input.match(/[a-z\s,äöüß-]*.*:/i);
serial  = title_input.match(/:\s?[a-z\s,äöüß-]*/i);
console.log(title.length); // <-- Logging

We can see that title is the following:

["Die Träne des Fressers:", index: 0, input: "Die Träne des Fressers: Weiße Königin"]

For your code to work, you need to get the first element of the title array (if available) before calling .replace():

title_input = $("#title").text(); 

title 	= title_input.match(/[a-z\s,äöüß-]*.*:/i);
serial 	= title_input.match(/:\s?[a-z\s,äöüß-]*/i);

if(title && title.length) {
  title = title[0];  
  title.replace(/\:/g,'');
}

$("#output_title").text(title);
$("#output_serial").text(serial);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="title">Die Träne des Fressers: Weiße Königin</div>
Title:<div id="output_title">output title</div>
Serial:<div id="output_serial">output serial</div>

Extra Note: To ensure you don't get an undefined type error, it's a good idea to ensure that title exists and is not an empty array as noted by the if(title && title.length) line.

answered Nov 16, 2015 at 17:21

War10ck

12.5k7 gold badges46 silver badges56 bronze badges

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

2 Comments

Hexodus Over a year ago

This is a very good explanation and good example to learn from. Thank you!

Hexodus Over a year ago

I could also convert the array using String(title) - this should also solve the array problem IMHO.

Zakaria Acharki · Accepted Answer · 2015-11-16 17:31:04Z

2

Like @Pointy mentioned in comments the match() return an array and The first element of the array (element 0) will contain the matched substring so you have to select first element by addinng [0] :

title   = title_input.match(/[a-z\s,äöüß-]*.*:/i)[0];
serial  = title_input.match(/:\s?[a-z\s,äöüß-]*/i)[0];

Also the replace() method will return the new string generated after replacement, so you have to assign it to your variable :

title = title.replace(/\:/g,'');

hope this helps.

Updated fiddle.

edited Nov 16, 2015 at 17:31

answered Nov 16, 2015 at 17:19

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

1 Comment

Hexodus Over a year ago

I like the way how you handle the array in this compact notation. You're right I wasn't aware that the return value is an array. Thank you.

Kamil P · Accepted Answer · 2015-11-16 17:20:54Z

1

Variable title exists only when script can find one of this symbols and title isn't string - it's array. You can't use replace on null or on array.

This should works:

var title = $("#title").text(); 
title = title.replace(/[a-z\s,äöüß-]*.*:/i,'');

And if you want to split this string you should use .split(':') function.

answered Nov 16, 2015 at 17:20

Kamil P

7951 gold badge12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Jquery code breaks when using replace() function

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related