Javascript jQuery只替换节点的文本，忽略当前的内部节点

我有一些HTML：

<label>Search:
  <input id="search-box" type="text"/>
</label>

如果我想将单词Search:更改为quicksearch:，如何使用jQuery/JS只选择Search:text

我尝试过html、文本和其他各种jQuery方法。我的目标是不必复制输入框，然后再将其追加。可能吗

另外，我知道我可以使用prepend函数，但我的目标是完全替换该文本，我想知道将来如何做到这一点

---

非常感谢。

您可以在标签内部和输入之前创建一个span标记。为跨度赋予id属性，并用文本替换该跨度内的文本。最好不要用html替换它

您需要将它放在一个单独的元素中，您不能仅获取和更新文本，而不能按照当前的布局更新输入

最简单的方法是使用span标记，然后按如下方式修改：

<label id="my-label"><span>Search:</span>
  <input id="search-box" type="text"/>
</label>

---

Fiddle:

如果您可以访问HTML，我会将文本包装在一个跨距中，以便您可以轻松地处理它。但是，根据目前的情况，您可以简单地迭代元素中的所有节点，并更改第一个文本节点nodeType==3的值：

$function{ $label.contents.eachfunction{ 如果this.nodeType==3{ this.textContent=快速搜索：； 返回false； } } }; 搜索：

---

为此，您需要查看文本节点。你通过使用内容来获得它们。下面的解决方案有点过火，但它向您展示了如何查找textNode类型3，并查看文本中是否包含搜索

var textNodes=$label 目录 .filterfunction{ 返回this.nodeType===3&&this.nodeValue.indexOfSearch>-1； }.每个函数{this.nodeValue=this.nodeValue.replaceSearch，快速搜索；}； 搜索：

---

尝试从标签中删除所有文本部分，然后插入另一个文本

$('label').contents().filter(function(){
    return this.nodeType === 3;
}).remove();

$('label input').before('Quick Search: ');

对于可重用的porpose，您可以扩展jQuery，并为此添加一个方法

(function($) {

    $.fn.replaceText = function(oldText, newText) {
        this.contents().each(function(){
            if (this.nodeType === 3) {
                this.textContent = this.textContent.replace(oldText, newText);
            }
        });
        return this;
    };

}(jQuery));

$('label').replaceText('Search', 'Quick Search');

---

您可以使用纯Javascript实现这一点……不需要jQuery。您只需要访问标签中的第一个节点并更改值

document.queryselectoral'label'[0].firstChild.nodeValue=Quicksearch:； 搜索： 我得到了结果，但数据表搜索id为：

$document.readyfunction{ $'myTable'。数据表； $myTable_过滤器label.contents.eachfunction{ 如果this.nodeType==3{ this.textContent=快速搜索：； 返回false； } }; }; Col-1Col-2 名称1User-1 名称2User-2 名称3User-3 此外，这里还有一个无jQuery的方法，该方法迭代每个标签和大小写，而不考虑textNode的位置，使用快速搜索替换搜索的每个实例

作用{ var labels=document.queryselectoral'label'； 对于l=0；l=0{ node.textContent=node.textContent.replace/search/i，快速搜索； } } } }; 搜索： 你喜欢蜜蜂吗？ 此搜索实例将不会更改 搜索此Mofo： 填满我 用你的搜索。

---

这是一个好主意，但是这个HTML是由一个JavaScript插件DataTables.net生成的，因此我无法控制它是如何生成的。这确实是另外一回事。你可以。但这不是最好的办法。获取当前的html，替换其中的一部分并将其放回原处。@epascarello好的，我将等待您的答案，告诉我如何操作，因为就我对jQuery的了解而言，我不知道如何操作。有一个youFYI解决方案的开始：这个答案的呈现输出有点不同，因为它会丢失一个空格。显然比我自己的答案要好得多。我完全支持jQuery免费解决方案。注意：挑剔者可能希望您将“Quicksearch:”更改为“Quicksearch:”，只要第一个子项是替换它的文本，它就可以工作。对……如果标记更改，您最好循环检查节点类型。

(function($) {

    $.fn.replaceText = function(oldText, newText) {
        this.contents().each(function(){
            if (this.nodeType === 3) {
                this.textContent = this.textContent.replace(oldText, newText);
            }
        });
        return this;
    };

}(jQuery));

$('label').replaceText('Search', 'Quick Search');