使用输入javascript更改某个值？

Question

所以我在这里找到一个javascript查找和替换代码，找到你搜索的内容并用输入替换。我需要代码才能找到＆＃34; xxxxxx＆＃34;没有要求输入，所以剩下的唯一输入就是替换框，它会自动将xxxxxx更改为用户输入。有什么建议？这是我的代码：

＆＃13;

＆＃13;

location = /api/api./php {}

＆＃13;

var haystackText = "";

function findMyText(needle, replacement) {
  if (haystackText.length == 0) {
    haystackText = document.getElementById("haystack").innerHTML;
  }
  var match = new RegExp(needle, "ig");
  var replaced = "";
  if (replacement.length > 0) {
    replaced = haystackText.replace(match, replacement);
  } else {
    var boldText = "<div style=\"background-color: yellow; display: inline; font-weight: bold;\">" + needle + "</div>";
    replaced = haystackText.replace(match, boldText);
  }
  document.getElementById("haystack").innerHTML = replaced;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需删除 find 输入的行，然后使用以下参数调用该函数：findMyText('xxxxxx', document.getElementById('replacement').value);

这就是我的意思：

var haystackText = "";
function findMyText(needle, replacement) {
     if (haystackText.length == 0) {
          haystackText = document.getElementById("haystack").innerHTML;
     }
     var match = new RegExp(needle, "ig");     
     var replaced = "";
     if (replacement.length > 0) {
          replaced = haystackText.replace(match, replacement);
     }
     else {
          var boldText = "<div style=\"background-color: yellow; display: inline; font-weight: bold;\">" + needle + "</div>";
          replaced = haystackText.replace(match, boldText);
     }
     document.getElementById("haystack").innerHTML = replaced;
}

<div id="haystack">
<p>Paragraph paragraph paragraph xxxxxx paragraph</p>
<p>Paragraph paragraph paragraph xxxxxx paragraph</p>
<p>Paragraph paragraph paragraph xxxxxx paragraph</p>
</div>
<br>
<table>
<tr><td>Replacment</td><td><input id="replacement" name="replacement" type="text"></td></tr>
</table>
<input type="button" value="Update" onClick="findMyText('xxxxxx', document.getElementById('replacement').value);">

Answer 2

您可以修改onclick处理程序以获得固定值xxxxx。像这样：onClick="findMyText('xxxxxx', document.getElementById('replacement').value);"

＆＃13;

＆＃13;

var haystackText = "";

function findMyText(needle, replacement) {
  if (haystackText.length == 0) {
    haystackText = document.getElementById("haystack").innerHTML;
  }
  var match = new RegExp(needle, "ig");
  var replaced = "";
  if (replacement.length > 0) {
    replaced = haystackText.replace(match, replacement);
  } else {
    var boldText = "<div style=\"background-color: yellow; display: inline; font-weight: bold;\">" + needle + "</div>";
    replaced = haystackText.replace(match, boldText);
  }
  document.getElementById("haystack").innerHTML = replaced;
}

＆＃13;

<div id="haystack">
  <p>Paragraph paragraph paragraph xxxxxx paragraph</p>
  <p>Paragraph paragraph paragraph xxxxxx paragraph</p>
  <p>Paragraph paragraph paragraph xxxxxx paragraph</p>
</div>
<br>
<table>
  <!--<tr><td>Find</td><td><input id="needle" name="needle" type="text"></td></tr>-->
  <tr>
    <td>Replacment</td>
    <td><input id="replacement" name="replacement" type="text"></td>
  </tr>
</table>
<input type="button" value="Update" onClick="findMyText('xxxxxx', document.getElementById('replacement').value);">

＆＃13;

＆＃13;

＆＃13;

如果您希望文本更新＆＃34; live＆＃34;，当用户输入时，您可以在文本框中使用onInput处理程序。

＆＃13;

＆＃13;

var haystackText = "";

function findMyText(needle, replacement) {
  if (haystackText.length == 0) {
    haystackText = document.getElementById("haystack").innerHTML;
  }
  var match = new RegExp(needle, "ig");
  var replaced = "";
  if (replacement.length > 0) {
    replaced = haystackText.replace(match, replacement);
  } else {
    var boldText = "<div style=\"background-color: yellow; display: inline; font-weight: bold;\">" + needle + "</div>";
    replaced = haystackText.replace(match, boldText);
  }
  document.getElementById("haystack").innerHTML = replaced;
}

＆＃13;

<div id="haystack">
  <p>Paragraph paragraph paragraph xxxxxx paragraph</p>
  <p>Paragraph paragraph paragraph xxxxxx paragraph</p>
  <p>Paragraph paragraph paragraph xxxxxx paragraph</p>
</div>
<br>
<table>
  <!--<tr><td>Find</td><td><input id="needle" name="needle" type="text"></td></tr>-->
  <tr>
    <td>Replacment</td>
    <td><input id="replacement" name="replacement" type="text" onInput="findMyText('xxxxxx', document.getElementById('replacement').value);"></td>
  </tr>
</table>
<!--<input type="button" value="Update" onClick="findMyText('xxxxxx', document.getElementById('replacement').value);">-->

＆＃13;

＆＃13;

＆＃13;