Replace part of a string with another string javascript

Question

what I have is 3 text boxes. The first one a user enters a string. The second box they enter part of the first string they want to replace. The third text box is the string that is to do the replacing.

I'm trying to use the replace() method but I dont think Im using it right or i should be using something else.

html:

        <form>
            Enter a string:<input type="text" id="user_string"><br>

            Enter portion of previous string to be replaced: <input type="text" id="replace_string"><br>

            Enter new string: <input type="text" id="add_string"><br>

            <input type="button" value="Execute" onclick="BaitAndSwitch()"><br>

            Result: <input type="text" id="req_4_results"><br>
        </form>

Javascript:

function BaitAndSwitch(){
    // create variables for the user entered data
    var UserString = document.getElementById("user_string").value;

    var ReplaceString = document.getElementById("replace_string").value;

    var AddString = document.getElementById("add_string").value;

    var Results = UserString.replace(ReplaceString, Addstring);

    if (UserString.indexOf(ReplaceString) > -1) {
        Document.getElementById("req_4_results").value = Results;
    }
    else{
        alert("Something went wrong! Please check the data you entered.")
    }
}

I know I'm doing something wrong. Maybe the use of variables in the .replace() method? Or maybe the if... using indexOf line?

I was essentially trying to set it up where it would check UserString with the value of ReplaceString and if it matched, it would then execute the replace() method and show results to the given HTML element. Else if the ReplaceString didn't match any thing from UserString, it would alert the user something was wrong and to check it.

`Document.getElementById("req_4_results")` should be `document.getElementById("req_4_results")`. JavaScript is Case SensiTiVe. Also, note that your function will only replace the first occurrence of the _needle_ (`ReplaceString`). If you want to replace all of them, you should [use a regular expression](http://stackoverflow.com/a/494046/1913729). — blex, Sep 06 '15 at 17:59
Unrelated, but in general, non-function variables should be lower-cased, e.g., `userString`, `replaceString`, etc. Capitalized variable names, by convention, are for functions used to create objects via `new`. Following conventions helps JS developers think about your code. — Dave Newton, Sep 06 '15 at 18:03
@blex Could you possibly give me an example? I'm not quite sure i understand how that works. or what you mean by "needle", did some quick googling but Im even more confused on how that works — kronis72, Sep 06 '15 at 18:29
@kronis72 Here is an example, with [your code](http://jsfiddle.net/3xrwchqj/) (only the first occurrence is replaced). And [using Regex](http://jsfiddle.net/o3vuu9LL/). Usually, when talking about finding a String within another, or an element within an Array, most documentations will talk about searching for a _needle_ in a _haystack_, which makes it easy to understand. — blex, Sep 06 '15 at 18:38
@blex thanks alot, one last question, when using regex should the variable always be "re", in all the examples i see its used but I was curious what you do if you have more then one regex within a function... as far as variable naming goes? — kronis72, Sep 06 '15 at 18:55
@kronis72 Nope, that's just a name for the Regex variable. Calling it `sweetHeart` is not a problem, although you might choose a better name, that makes it easier to understand when someone reads your code :) — blex, Sep 06 '15 at 18:59

score 3 · Accepted Answer · edited May 23 '17 at 12:23

3

JavaScript is cAsE SeNsItIvE. Please note that Document is not the same as the document object. Please use the below line:

document.getElementById("req_4_results").value = Results;

Oh and yes, as pointed out by blex, you have another typo too:

var Results = UserString.replace(ReplaceString, Addstring);
//-------------------------------------------------^ should be S

More Info: In the console, if you try both, see the result you get:

typeof Document
// "function"
typeof document
// "object"

On a side note, please do not use such Naming Conventions. Looks like you are migrating from Visual Basic.

edited May 23 '17 at 12:23

Community

1
1

answered Sep 06 '15 at 18:01

Praveen Kumar Purushothaman

164,888
24
203
252

Thanks, That was the first thing I went through and looked for but seems i still overlooked case sensitive errors. I was also unaware of the naming conventions situation as well. – kronis72 Sep 06 '15 at 18:20

score 1 · Answer 2 · edited Sep 06 '15 at 19:05

Note that the replace() method does not modify the string that you call it on.

In your line of code:

var Results = UserString.replace(ReplaceString, Addstring);

The value of UserString will not changed as a result of having called replace() on it.

In your conditional statement:

UserString.indexOf(ReplaceString) > -1

If it is true, it means that UserString still contains at least one instance of ReplaceString within it.
That makes sense, because you wouldn't have modified UserString yet. If you want to make sure that Results no longer has any occurrence of ReplaceString, then you want to throw an error only if the following condition is true:

Results.indexOf(ReplaceString) > -1

If the replace method does not modify the string i call it on. Then how do I replace it. lets say they enter "the dog sat." and they want to change "sat" to "run" so they enter "sat" for add_string. does the replace method not change "sat" to "run" — kronis72, Sep 06 '15 at 18:38

Replace part of a string with another string javascript

2 Answers2