Changing text in HTML through JavaScript

Question

I want to create a button that allows me to change ANY word or PHARSE in a html body. I want to be able to INPUT a word I want to change, and INPUT a word to be changed to. By using an execution button the changes should be applied.

Hope somebody will know how to do it : )

There is another explanation of the task in HTML text.

function changeText () {
  
  var x = document.getElementById("input1").value;
  var y = document.getElementById("input2").value;
  
  var textnodes, node, s;

 textnodes = document.evaluate("//text()", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

 for (var i = 0; i < textnodes.snapshotLength; i++) {
  node = textnodes.snapshotItem(i);
  s = node.data;
  s = s.replace(x, y);
  node.data = s;
 }     
    
  /*
    This is what i found and I do not understand it. It changes only one word at time (yes i know there is something like /"abc.."/g, g-global and everything changes but it doesn't work with parameters.
    
    MISSING: 1.proper Change CODE
    
    
    */
    
    
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset = "UTF-8">
  <title>Task1</title>
        
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="*.js"></script>
 </head>
 <body>
       
  <div class="inputbox">
   Change From:
   <input type="text" id="input1" value="banana"><br />
   Change To:
   <input type="text" id="input2" value="strawberries">
   <button onclick="changeText()">Execute</button>
  </div>
  
  <p class="phrases">
   This is a simple text. I want to <b>select a word or a phrase, and change it to another using two textboxes and a button to execute</b>. After execution, ALL of the matching words or phrases should be changed at one time. If it's possible, the "Change Text" function should only apply to WHOLE WORDS; When I select "Change from" - Banana to - strawberries only "Banana" strings should be changed instead of changing "Bananas" as well. 
  </p>
  <p class="phrases">
   TEST: Banana, apple, banana, apple, carrot, carrots, bananas, apples, banana, carrots. 
  </p>

 </body>
</html>

score 1 · Answer 1 · answered Nov 23 '16 at 22:20

Check out this small JS library: https://github.com/padolsey/findAndReplaceDOMText

I've used this library in the past... so if you pass in "body" it should search across all elements on the page like you are wanting:

findAndReplaceDOMText(document.getElementsByTagName("body")[0], {
  find: x,
  replace: y
});

score 0 · Answer 2 · answered Nov 23 '16 at 22:15

0

Can you not just use innerHTML and search for a particular string within the text? Then use string replace? Look up MDN or W3schools or something for information on how to do those specific things in JavaScript.

I'm not going to give you code for this because this sounds suspiciously like a homework type question, and someone here just giving you the answer doesn't help anyone.

answered Nov 23 '16 at 22:15

Luke K

865
6
13

Well, it's too simple to look up 'abc' and replace it with 'def'. And there is a lot of answers to that, and also it's useless in real word. And this task is more realistic. So what it could be a homework ? I can't do that and looking for answers. And that's the proper site. I wrote everything by myself so there is no copy and paste job. – Tigo Nov 23 '16 at 22:23
Do you mean that searching to change the word "go" would also change all instances of it in "going"? If that's the case just use regex to check if there's a space, full stop, comma, or other such symbol around it. – Luke K Nov 23 '16 at 22:31

Tigo · Answer 3 · 2016-11-25T18:49:12.757

Function that finally works. (there must be added DIV id="text" that covers

paragraphs in the html document.

function changeText() {

    var profile_values = document.getElementsByClassName('pharses');
    var total = 0;

    for (var j = 0; j < profile_values.length; j++) {
      total += profile_values[j].innerHTML.trim().split(" ").length;
    } //counting total number of words

    var replaceme = document.getElementById("input1").value;
    var replacement = document.getElementById("input2").value;

    var i = 0;

    do {
      document.getElementById("text").innerHTML = document.getElementById("text").innerHTML.replace(replaceme, replacement);
      i++;
    } while (i <= total); // loop for replacing words
  
  }

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Task1</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="*.js"></script>
</head>

<body>

  <div class="inputbox">
    Change From:
    <input type="text" id="input1" value="banana">
    <br />Change To:
    <input type="text" id="input2" value="strawberries">
    <button onclick="changeText()">Execute</button>
  </div>
  <div id="text">
    <p class="phrases">
      This is a simple text. I want to select a word or a phrase, and change it to another using two textboxes and a button to execute. After execution, ALL of the matching words or phrases should be changed at one time. If it's possible, the "Change Text"
      function should only apply to WHOLE WORDS; When I select "Change from" - Banana to - strawberries only "Banana" strings should be changed instead of changing "Bananas" as well.
    </p>
    <p class="phrases">
      TEST: Banana, apple, banana, apple, carrot, carrots, bananas, apples, banana, carrots.
    </p>
  </div>
</body>

</html>

actually it does not work, because of a typo, `pharses` should be `phrases` — arhak, Nov 25 '16 at 19:01

score 0 · Answer 4 · edited May 23 '17 at 12:07

BTW, there is no need to count and then loop to replace each instance of the match. You can do all at once

function changeText() {

    var profile_values = document.getElementsByClassName('phrases');

    var replaceme = document.getElementById("input1").value;
    var replacement = document.getElementById("input2").value;

    document.getElementById("text").innerHTML = document.getElementById("text").innerHTML.replace(new RegExp(replaceme, 'g'), replacement);
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="inputbox">
    Change From:
    <input type="text" id="input1" value="banana">
    <br />Change To:
    <input type="text" id="input2" value="strawberries">
    <button onclick="changeText()">Execute</button>
  </div>
  <div id="text">
    <p class="phrases">
      This is a simple text. I want to select a word or a phrase, and change it to another using two textboxes and a button to execute. After execution, ALL of the matching words or phrases should be changed at one time. If it's possible, the "Change Text"
      function should only apply to WHOLE WORDS; When I select "Change from" - Banana to - strawberries only "Banana" strings should be changed instead of changing "Bananas" as well.
    </p>
    <p class="phrases">
      TEST: Banana, apple, banana, apple, carrot, carrots, bananas, apples, banana, carrots.
    </p>
  </div>

see also How to replace all occurrences of a string in JavaScript?

Changing text in HTML through JavaScript

4 Answers4