0

This is a weird question.

Essentially, I thought it would be a cool idea to let a user type a string, have that string converted to base64, and create an image.

Although I'm not learned in base64, I know images have header data, and need to be a certain length. I've managed to separate the base64 data that tells the colors of the image. Right now, I have a basic white image - you can check a js fiddle here - (not sure if it's working there, but it works in my browser).

Anyway, the variable "imgdata" is the raw data for my PNG image, and that's what I'd like to change. Unfortunately, that string seems to need a certain amount of characters, or the image won't work (guessing it's a size specified in the header?)

Because it is unlikely that a user inputted string will always reach that same number of characters when converted to base64, I would like to know how to replace the first part of a string, and leave the rest alone.

TL;DR

I have this string - 

aaa

and I want to replace this string -

123456

Since string1 is only 3 characters, I only want it to replace the first 3 characters of string2 so the outcome would look like

aaa456

remember that string1 will vary in length.

Alexander Lozada
  • 4,019
  • 3
  • 19
  • 41
  • 1
    Look at `.slice()` and `.length` for strings and you should find all the answer you need. – jfriend00 Nov 05 '14 at 23:05
  • are strings considered arrays in Javascript similarly to Java, or will I need to do something like create a new array and assign each character to a new index? – Alexander Lozada Nov 05 '14 at 23:09
  • No. Strings are not arrays in Javascript. Strings have their own set of methods and there is no need to put them into arrays to solve your issue. Perhaps you need to peruse the methods available on strings right [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String). It is trivial to obtain the first or last N characters of a string with `.slice()` and then add two strings back together which is all you need to solve your issue. – jfriend00 Nov 05 '14 at 23:09
  • @AlexanderLozada Strings are immutable in Javascript. – Harry Pehkonen Nov 05 '14 at 23:12

2 Answers2

1

Create a String containing the default values:

var fullLength = "abcdefg";

Get the user input as another string:

var user = "aaa";

Create a third string which is a combination of the user data and the end of the default:

var combined = user + fullLength.substring(user.length);

Because JavaScript is a weakly typed language, you need to ensure you are working with String objects. You can do this by concatenating with an empty string which will make sure all of the string functions work:

var userString = userInput + "";

Also, there are three very similar String functions, slice(), substr(), and substring(). Do some research on MDN to see which is best for you.

Warren R.
  • 497
  • 3
  • 12
  • Darn - I was really hoping the OP could figure this rather trivial task out themselves after being shown the doc for the string object and pointed to a relevant method, but I guess that's not how SO works. – jfriend00 Nov 05 '14 at 23:14
  • @jfriend00, I've been working with Javascript for over a year now. It's trivial, but I've actually never come across something like this before (at least in Javascript). More or less, I wasn't aware of the functions I needed, and the topic was difficult to research. From what I understand, your method would include putting every character into an array, slicing out the ones I didn't need, and then prepending. Warren's method looks a little simpler (at least from what I can tell). – Alexander Lozada Nov 05 '14 at 23:19
  • To be fair, what jfriend00 was describing is exactly what I laid out. He was just suggesting you use `slice()` instead of `substring()` (Both String functions). In this case either function would do the same thing. – Warren R. Nov 05 '14 at 23:22
  • 1
    @AlexanderLozada - I pointed you to the `.slice()` method on the `String` object. Nothing to do with an array. You apparently did not look at the page I linked to you. `.slice()` is similar to `.substring()` that Warren used, just takes slightly different arguments. I was just hoping you would have done a little research yourself to learn how to solve this yourself. FYI, a great reference on all built-in objects in Javascript is MDN. The String methods are all documented [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String). – jfriend00 Nov 05 '14 at 23:23
  • My apologies - when I researched your answer, I came across this [page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice), though I still don't think the reaction was entirely warranted :-) from doing these things in python so much, I assumed that you were talking about array manipulation. – Alexander Lozada Nov 05 '14 at 23:42
  • @jfriend00, looking back since someone just answered. Can't believe how embarrassed I am that this question exists - looking back it's so easy to research on my own. I owe you an apology. Thanks for being patient. – Alexander Lozada Jan 03 '16 at 05:43
0

Javascript slice method can be used alone to solve the problem. The first parameter for slice defines the first character position to grab. The second parameter (stop position) can be omitted which means you will get the rest of the string. By using the length of a as first parameter means it will skip as many character as the length of a and then pad with the rest of the contents of b:

a + b.slice(a.length) // 'aaa456'
Christian Landgren
  • 13,127
  • 6
  • 35
  • 31