Question

我需要运行搜索并替换HTML，类似于以下内容...我需要“查找下一个”“替换”和“全部替换”选项....诀窍是我需要运行一个一旦替换值，AJAX请求更新数据库中每个字段的值。

我遇到的唯一问题是我不确定如何搜索#sheet的内容并将值替换为用户提供的新值。

<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中保持索引的最佳方法是什么，而不将所有找到的结果存储在变量中并导致页面滞后？

Answer 1

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

<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`

Answer 2

您可以选择所有ID为item的div，这些div是ID为sheet的元素的子元素，如下所示：

$('#sheet > div.item')

您可以使用.text()设置每个div.item的文字：

$('#sheet > div.item').text(function (i, oldText)
{
    return oldText.replace('something', 'somethingElse');
});

这就是你要找的东西吗？

Answer 3

如果必须搜索/替换html，请使用innerHTML属性：

document.getElementById("sheet").innerHTML

但请注意，浏览器将DOM作为树保留在内存中，而不是HTML。它只读取HTML来构造DOM。所以你可能会发现元素变化更快。

Answer 4

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

Answer 5

这是一个纯粹的Javascript解决方案。您可以将innerHTML #sheet存储到全局变量中，然后使用new 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>");
    };

替换中的$&表示匹配的RegExp。

See working example →

Javascript在页面上找到文本

5 个答案: