Javascript在页面上查找文本

我需要在HTML上运行搜索和替换，如下所示。。。我需要找到下一个替换和替换所有选项。。。。诀窍在于，一旦值被替换，我需要运行一个AJAX请求来更新数据库中每个字段的值

我遇到的唯一问题是，我不确定如何准确地搜索工作表的内容，并用用户提供的新值替换这些值

<div id='sheet'>
<div class='item' id='field-18583'>This is yet another test</div>
<div class='item' id='field-18585'>This is test data</div>
</div>

我应该说，我可能会有大量文本要搜索，因此理想情况下，我只会找到正在搜索的项目的下一个实例，而不是所有实例。所以当我点击“查找下一个”时，如果我输入了3个项目，它将转到第4个

---

在javascript中，在不将所有找到的结果存储在一个变量中并在页面上造成延迟的情况下，最好的方法是什么？如果必须搜索/替换html，请使用innerHTML属性：

document.getElementById("sheet").innerHTML

---

但是请注意，浏览器将DOM作为树而不是HTML保存在内存中。它只读取HTML来构造DOM。因此，您可能会发现按元素进行的更改更快。

您可以选择所有带有类项的div，这些div是ID表元素的子元素，如下所示：

您可以使用以下命令设置每个div.item的文本：

---

这就是您想要的吗？

我会在遍历匹配元素的同时构建一个数据对象。然后发送对象，这样就不会有来自循环的多个ajax请求：

---

这里有一个纯Javascript解决方案。您可以将sheet的innerHTML存储到全局变量中，然后在新的RegExp中使用搜索输入值来替换找到的文本。因此，考虑到以下HTML：

<div id='sheet'>
    <div class='item' id='field-18583'>This is yet another test</div>
    <div class='item' id='field-18585'>This is test data</div>
</div>
<input type="text" id="t" /><button id="s" onclick="searchIt()">Search</button>

你可以这样做：

var sheet,
    searchIt = function() {
        var v = document.getElementById('t').value;

        sheet = (typeof sheet == "undefined") ?
                document.getElementById('sheet').innerHTML :
                sheet;

        document.getElementById('sheet').innerHTML = 
            sheet.replace(new RegExp(v, 'ig'), "<span>$&</span>");
    };

replace中的$&表示匹配的RegExp

---

用户如何更改数据？你在让那些div内容可编辑吗？在页面的其他地方填写表单？看到了吗：这个问题被标记为jquery，所以OP可能不是在寻找一个严格意义上的JS解决方案。我了解如何获取工作表内部HTML，我更关注如何搜索该内部HTML以获得所提供的文本，最好只是找到结果的下一个实例。答案很好。根据您对问题的描述，您可能希望使用正则表达式来确保替换所有出现的字符串，如replace/something/g中的“somethingElse”。默认情况下，replace方法将只替换第一次出现的内容。您是对的。这个问题很模糊，所以我的答案最好是泛泛的，但在语法上是正确的。如果OP提供了更多信息，我很乐意相应地编辑我的答案。@andres descalzo-如果需要区分大小写，请使用SO社区的过滤器。

<div class='item' id='field-18583'>This is yet another test</div>
<div class='item' id='field-18585'>This is test data</div>

var searchTerm = 'This is',
    replaceWith = 'This is new',
    updateObj = {};
$("#sheet div.item:contains('" + searchTerm + "')").each(function(){
   // use id to build an update object
    updateObj[this.id.replace('field-', '')] = {
        oldText: searchTerm, 
        newText: replaceWith
    }; // not sure what you are trying to save here
   // manipulate html
   this.innerHTML = this.innerHTML.replace(searchTerm, replaceWith);
});
// after, send ajax data `updateObj`

$('#sheet').children().each(function(){
    $(this).html().replace('oldVal', 'newVal');
});

<div id='sheet'>
    <div class='item' id='field-18583'>This is yet another test</div>
    <div class='item' id='field-18585'>This is test data</div>
</div>
<input type="text" id="t" /><button id="s" onclick="searchIt()">Search</button>

var sheet,
    searchIt = function() {
        var v = document.getElementById('t').value;

        sheet = (typeof sheet == "undefined") ?
                document.getElementById('sheet').innerHTML :
                sheet;

        document.getElementById('sheet').innerHTML = 
            sheet.replace(new RegExp(v, 'ig'), "<span>$&</span>");
    };