screenshots.gif

html

<div>
  <label for="content">内容框:</label>
  <input type="text" id="content" name="content">
</div>

<div>
  <label for="find">查找框:</label>
  <input type="text" id="find" name="find">
</div>

<div>
  <label for="replace">替换框:</label>
  <input type="text" id="replace" name="replace">
</div>

<button id="btn">替换</button>


js

const contentBox = document.getElementById("content");
const findBox = document.getElementById("find");
const replaceBox = document.getElementById("replace");

document.getElementById("btn").addEventListener("click", function() {
  const content = contentBox.value;
  const findValue = findBox.value;
  const replaceValue = replaceBox.value;

  if (content.indexOf(findValue) != -1) {
    const replacedContent = content.replace(new RegExp(findValue, 'g'), replaceValue);
    contentBox.value = replacedContent;
  }
});