Question

我有一些HTML：

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

如果我想更改单词＆＃34;搜索：＆＃34;到＆＃34;快速搜索：＆＃34;，如何选择＆＃34;搜索：＆＃34;使用jQuery / JS的文本？

我尝试了html()，text()和其他各种jQuery方法。我的目标是不必复制输入框然后追加它。有可能吗？

P.S。我知道我可以使用prepend()函数，但我的目标是完全替换该文本，并且我想知道将来如何做到这一点。

非常感谢。

Answer 1

如果您有权访问HTML，我会将文字换成span，以便您轻松解决。但是，到目前为止，您可以简单地遍历元素中的所有节点并更改第一个文本节点textContent的https://github.com/binaryfoo/emv-bertlv：

＆＃13;

nodeType==3

＆＃13;

$(function(){
    
    $("label").contents().each(function() {
        if(this.nodeType == 3){
            this.textContent = "Quick Search: ";
            return false;
        }
    })
    
});

＆＃13;

Answer 2

要做到这一点，你需要查看文本节点。您可以使用contents()获取它们。下面的解决方案有点矫枉过正，但这会向您展示如何查找textNode（类型3）并查看文本是否包含Search。

＆＃13;

var textNodes = $("label")
  .contents()
  .filter(function() {
    return this.nodeType === 3 && this.nodeValue.indexOf("Search")>-1; 
  }).each( function() { this.nodeValue = this.nodeValue.replace("Search", "Quick Search"); });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>Search:
  <input id="search-box" type="text"/>
</label>

＆＃13;

你可以摆脱过滤器，只需在每个过滤器中完成所有操作，如果你愿意，可以打破。

var textNodes = $("label")  //should use a better selector
  .contents()
  .each(function() {
      if( this.nodeType === 3 && this.nodeValue.indexOf("Search")>-1 ) {   
          this.nodeValue = this.nodeValue.replace("Search", "Quick Search");
          return false; 
      }
  );

Answer 3

你可以用直接的Javascript做到这一点......不需要jQuery。您只需访问标签中的第一个节点并更改该值即可。

document.querySelectorAll('label')[0].firstChild.nodeValue = "Quicksearch: ";

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

Answer 4

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

$('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');

Answer 5

我得到的结果是 dataTable搜索ID ：

$(document).ready(function(){
    $('#myTable').DataTable();
        
    $("#myTable_filter label").contents().each(function() {
        if(this.nodeType == 3){
            this.textContent = "Quick Search:";
            return false;
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="myTable">
  <thead>
    <tr><th>Col-1</th><th>Col-2</th></tr>
  </thead>
  <tbody>
    <tr><td>name 1</td><td>User-1</td></tr>
    <tr><td>name 2</td><td>User-2</td></tr>
    <tr><td>name 3</td><td>User-3</td></tr>
  </tbody>
</table>

Answer 6

继@jlbruno's answer之后，这是一个无jQuery的方法，它迭代每个 label，并且不区分大小写地将Search的每个实例替换为Quick Search无论textNode的位置如何。

(function(){
    
    var labels = document.querySelectorAll('label');
    for (l = 0; l < labels.length; ++l){
        var label = labels[l],
            nodes = label.childNodes;
        for (n = 0; n < nodes.length; ++n){
            var node = nodes[n];
            if(node.nodeType===3 && node.textContent.toLowerCase().indexOf("search")>=0){
            	node.textContent = node.textContent.replace(/search/i,"Quick Search");
            }
        }
    }
    
})();

<label>Search:
  <input name="search" type="search"/>
</label>
<br />
<label>Do you like bees?
  <input name="beesPlease" type="checkbox"/>
</label>
<br />
<label>
    <textarea name="textarea">this instance of search will not be changed</textarea>
</label>
<br />
<label>Search This Mofo: 
  <input name="search-this" type="text"/>
</label>
<br />
<label>Fill me 
  <input name="search-that" type="text"/>
  with your search.
</label>

Answer 7

您可以在标签内和输入之前创建span标签。为span添加id属性，并用该文本替换该span中的文本。防止使用html替换它会更好。

Answer 8

你需要把它放在一个单独的元素中，你不能抓住并更新文本而不是当前布局的输入。

最简单的方法是使用span标记，然后像这样修改：

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

然后使用它来修改它：

$('#my-label > span').text('Quicksearch:');

小提琴：http://jsfiddle.net/orj8gkxc/

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

8 个答案: