CODEWITHSUNDEEP
javascript
LearnSomethingNew
LearnSomethingNew

Reputation: 23

javascript string replace sentence

I have this scenario on my chatbox where in I want to bypass the string from a built in application and replace it with specific phrase.

<div id="testdiv">
This is an example of a sentence that i want to replace.
</div>

I want to replace the following:

The word "sentence" should remain and wont be affected.

So the output will be: I replaced the sentence using javascript

I used this code of mine, 2 function and it is working but I'm looking for someone's help to clean my code or other method like split or concat if applicable? And if possible to put it on 1 function with the same idea.

function replace1 () {
      var str1 = document.getElementById("testdiv").innerHTML;
      var ptrn1 = /This is an example of a/gi;
      var rep1 = "This is an example of a";
      var newstr1 = rep1.replace(ptrn1, "that i want to replace");
      document.getElementById("testdiv").innerHTML = newstr1;
  }

  function replace2 () {
      var str2 = document.getElementById("testdiv").innerHTML;
      var ptrn2 = /that i want to replace/gi;
      var rep2 = "that i want to replace";
      var newstr2 = rep1.replace(ptrn2, "using javascript");
      document.getElementById("testdiv").innerHTML = newstr2;
  }

Upvotes: 1

Views: 4908

Answers (8)

Sventies
Sventies

Reputation: 2756

Here you go!

function replace(totalString, keepString) {
  var newstr = totalString.split(keepString);
  var repstr1 = "I replaced the";
  var repstr2 = "using javascript";
  return [repstr1, repstr2].join(keepString);
}

var div = document.getElementById("testdiv");
div.innerHTML = replace(div.innerHTML, " sentence ");
<div id="testdiv">
  This is an example of a sentence that i want to replace.
</div>

Upvotes: 0

Ana
Ana

Reputation: 1

for any input:

  function replace() {
    var fixedPiece = "sentence";
    var firstPart = "I replaced the ";
    var secondPart = " using javascript";
    var wholeSentence = document.getElementById("testdiv").innerHTML;

    var index = wholeSentence.indexOf('sentence');
    var newSentence = wholeSentence.replace(wholeSentence.substr(0, index - 1), firstPart).substr(0, index + fixedPiece.length);

    var newSentence = newSentence.concat(secondPart);
    document.getElementById("testdiv").innerHTML = newSentence;

  }

Upvotes: 0

grimur82
grimur82

Reputation: 169

<!DOCTYPE html>
<HTML>
<body>
    <center>
    <h1> Sentence</h1><br>
    <div id="testdiv">
        This is an example of a sentence that i want to replace.
    </div><br>
    <input type='text' id='replace' placeholder="Replace"><br>
    <input type='text' id='with' placeholder="With"><br>
    <input type='submit' onClick="replaceSentence()">
    </center>
    <script type="text/javascript">
        function replaceSentence(){
            var val = document.getElementById('testdiv').innerHTML; 
            document.getElementById('testdiv').innerHTML = val.replace(document.getElementById('replace').value,document.getElementById('with').value);
        }
    </script>
    </body>
</HTML>

Upvotes: 0

noa-dev
noa-dev

Reputation: 3641

I am not sure if I get you right but why don't you simply write it in one function without the use of all these helper variables. I would suggest you something like this as an dynamic approach.

function replaceText(toReplace, target, string){
    toReplace.map((s, idx) => { string = string.replace(s.input, s.output) })  
    target.textContent = string
}

let toReplace = [
   { input: 'This is an example of a', output: 'I replaced the'},
   { input: 'that i want to replace', output: 'using JavaScript'}]

let elem = document.getElementById('testdiv')
let string = elem.textContent

replaceText(toReplace, elem, string)

https://jsbin.com/zaceveqiji/edit?html,js,output

Upvotes: 0

Jefree Sujit
Jefree Sujit

Reputation: 1586

function replace1 () {
  var str1 = document.getElementById("testdiv").innerText;
  var ptrn1 = /This is an example of a/gi;
  var ptrn2 = /that i want to replace/gi;
  var str2 = str1.replace(ptrn1, "I replaced the").replace(ptrn2, "using javascript");
  document.getElementById("testdiv").innerHTML = str2;
}
      
replace1()
<div id="testdiv">
This is an example of a sentence that i want to replace.
</div>

Upvotes: 1

Jins Peter
Jins Peter

Reputation: 2469

You could use like this using split and join

Fiddle

Code

function replace(){
 var notReplaced = "sentence";
 var part1 = "I replaced the ";
 var part2 = " using javascript";
 var mainString = document.getElementById("testdiv").innerHTML;
 var splitPieces = mainString.split(notReplaced);
 splitPieces[0] = part1;
 splitPieces[1] = part2;

 var result = splitPieces.join(notReplaced);
  console.log(result);

}

Upvotes: 0

ewwink
ewwink

Reputation: 19154

you can use replace function like this str.replace(...).replace(...)

function replacer() {
  var str1 = document.getElementById("testdiv");
  var newstr1 = str1.innerHTML.replace(/This is an example of a/gi, "I replaced the")
    .replace(/that i want to replace/gi, "using javascript");
  str1.innerHTML = newstr1;
}
replacer();
<div id="testdiv">
  This is an example of a sentence that i want to replace.
</div>

Upvotes: 0

eol
eol

Reputation: 24565

You can also use a capturing group to capture the "sentence" content and wrap it with the desired replacements:

function replaceContents () {
      var str1 = document.getElementById("testdiv").innerHTML;
      var ptrn1 = /This is an example of a(.*)that i want to replace/gi;
      var replace1 = "I replaced the";
      var replace2 = "using javascript";
      var newstr1 = str1.replace(ptrn1, replace1+"$1"+replace2);
      document.getElementById("testdiv").innerHTML = newstr1;
  }

JSFiddle: https://jsfiddle.net/7hw6o8sy/

Upvotes: 0

Related Questions