Question

我正在尝试编写一个函数，在DOM中搜索一个文本并将其替换为另一个文本。换句话说，我有这个HTML：

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
</ul>

现在我想找到'Item4'并将其替换为'newItem4'。

我已经能够找到'Item4'，但无法弄清楚如何用新文本替换它。到目前为止，这是我函数中的代码：

var array = ['Item1', 'Item2', 'Item3', 'Item4', 'Item5'];

function replace() {

  var x = document.querySelectorAll('ul');

  var newText = document.createTextNode('newItem4');

  for (var i = 0; i < array.length; i++) {

     if (array[i] === 'Item4') {

    }
}

就我而言。不确定我是否走在正确的轨道上。

Answer 1

这是您在HTML中找到它的方式，

＆＃13;

var lis = document.querySelectorAll('li');
lis.forEach(function(li){ 
if(li.innerText.trim() ==  "Item4" )
  li.innerText  = "NewItem4";
});

＆＃13;

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
</ul>

＆＃13;

这是你如何处理数组

var array = ['Item1', 'Item2', 'Item3', 'Item4', 'Item5'];
array[array.indexOf('Item4')] =  'newItem4'

Answer 2

你可以做这样的事情来取代。

document.querySelector("button").addEventListener("click",
  function() {

    let searchText = document.querySelector("#searchText").value,
      replaceText = document.querySelector("#replaceText").value;

    [].forEach.call(document.querySelectorAll("li"), function(element) {

      if (element.innerText === searchText) {
        element.innerText = replaceText;
      };

    });
  });

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
</ul>

Search Text:
<input type="text" id="searchText" />Replace Text:
<input type="text" id="replaceText" />
<button>Change
</button>

如果你使用jQuery

，你也可以这样做

$(function() {
  $("li:contains('Item4')").html("NewItem4");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
</ul>

Answer 3

function replace() {
var li = document.getElementsByTagName("li");
 for (var i = 0; i < li.length; i++) {
if(li[i].innerHTML =="Item4")
 li[i].innerHTML ='newItem4';
   }
}
  replace();

document.getElementsByTagName("ul")[0].setAttribute("id", "myID");

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
</ul>

Answer 4

//index is the child number(li) and text is string to replace
function findAndReplace(index, text) {
    $("ul li:nth-child(" + index + ")").html(text);
}

如何在列表中找到文本并将其替换为新文本？

4 个答案: