Html Question posted in
Some basic documentation can be found here.

How to change a HTML button value

I want to change anything that says "Contact Me" to "Contact Us". I found some examples online they require either finding the ElementID or etc. I’m stumped on how I can achieve these. Can someone point me in the right direction?

I found examples like the below that use the ElementID but I can’t find such thing for the button.

let text = document.getElementById("demo").innerHTML; 
document.getElementById("demo").innerHTML = text.replace("Microsoft", "W3Schools");

I looked at trying to use an example like following, but I think its just completely wrong.

let originalString = "Contact Me";
let newString = originalString
.replace("Contact Me", "Contact Us");
console.log(newString);

Any advice would be great. Thanks.

Tags:

4

Answers


  1. 0

    You should just search and replace the text in the IDE or text editor. You should not need to do this via Javascript at all. Search for the phrase "Contact Me" in your text editor. Before replacing it, make sure it wrapped in either button tags to link tags i.e.

    <button>Contact Me</button>

    OR

    <a>Contact Me</a>
    Login or Signup to reply.
  2. 0

    I see your web using wordpress, maybe it use some contact plugin and its better to change in wordpress instead modify with script. But, you can try this code for this moment:

    <script type="text/javascript">    
    const buttonToChange = document.querySelector('input[value="Contact Me"]');
    buttonToChange.value = "Contact Us";
</script>
    Login or Signup to reply.
  3. 0

    So we first define two constants searchString and replacementString. searchString contains the text we want to find in the document(Contact Me), and replacementString contains the text we want to replace it with(Contact Us).

    The function replaceText() will recursively traverse through the DOM to find text nodes and input elements. This is what it does:

    • checks if the passed node is a text node or an element node

    • if it’s a text node, it converts both the search string and the node content to lowercase for case-insensitive comparison

    • it checks if the lowercase node content contains the lowercase search string

    • if it does contain the search string, it replaces the text while preserving the original case

    • if it is an element node, it checks if the element is an <input> element and if its value matches the search string

    • if it does match the search string, it replaces the input value with the replacement string

    • after processing the current node, it recursively calls itself for each child node of the current node

    • it starts the process by calling replaceText() with document.body as the initial node, which initiates the traversal of the entire document body so it covers the entire HTML page

    // Define the string you want to search for and the replacement
const searchString = "contact me";
const replacementString = "Contact Us";

// function that will replace text content of text nodes
function replaceText(node) {
  // if the node is a text node
  if (node.nodeType === Node.TEXT_NODE) {
    // convert both search string and node content to lowercase for case-insensitive comparison
    const nodeContent = node.nodeValue.toLowerCase();
    const search = searchString.toLowerCase();
    // check if the lowercase node content contains the lowercase search string
    if (nodeContent.includes(search)) {
      // replace the text while preserving the original case
      const originalText = node.nodeValue;
      const newText = originalText.replace(new RegExp(search, 'gi'), function (match) {
        // preserve the case of the matched substring
        return match.charAt(0) === match.charAt(0).toUpperCase() ? replacementString.charAt(0).toUpperCase() + replacementString.slice(1) : replacementString;
      });
      // update the text content of the node
      node.nodeValue = newText;
    }
  }
  // if the node is an element node
  else if (node.nodeType === Node.ELEMENT_NODE) {
    // check if the element is an input element and if its value matches the search string
    if (node.tagName === 'INPUT' && node.value.toLowerCase() === searchString.toLowerCase()) {
      // replace the input value with the replacement string
      node.value = replacementString;
    }
    // recursively call replaceText() for child nodes
    for (let i = 0; i < node.childNodes.length; i++) {
      replaceText(node.childNodes[i]);
    }
  }
}
// start traversing the document body to find and replace text
replaceText(document.body);
    Login or Signup to reply.
  4. 0

    Don’t really know why you would want to do it this way but, the key is to use a regex to find all variations you want to change.

    // regex will match only the "me"(s) after a "contact" separated by whitespace or a non-breaking-space, case-insensitively
const searchPattern = /(?<=contact(s|&nbsp;)*)me/gi
// function that replaces each letter of "me" with matching case "us"
const swapUsForMe = me => me.replace('M', 'U').replace('m', 'u').replace('e', 's').replace('E', 'S');

document.querySelectorAll('body > *').forEach(el => {
  if ('SCRIPT' !== el.tagName.toUpperCase()) {
    if ('input' === el.tagName.toLowerCase()) {
      el.value = el.value.replace(searchPattern, swapUsForMe)
    } else {
      el.innerHTML = el.innerHTML.replace(searchPattern, swapUsForMe)
    }
  }
})
    <h1>Contact ME!!</h1>
<p>
  Contact me with any questions
  <button>Contact&nbsp;me</button>
  <input type="button" value="ContactMe">
</p>

<input type="button" value="contact me">
<input type="submit" value="contact Me">
<input type="text" name="subject" value="contact me">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search