Question

我有一个HTML：

<div class="sth-key">
    <p>
        key here <span class="keyify">and here a key</span>
        <a href="/key-anything" title="dont change that key">and a key</a>
    </p>
    <p>
        and the final <strong>key</strong>
    </p>
</div>

我想替换“＆＃39; key＆＃39;这不是内部属性，使用＆＃39;铅笔＆＃39;，因此输出将如下所示：

<div class="sth-key">
    <p>
        pencil here <span class="keyify">and here a pencil</span>
        <a href="/key-anything" title="dont change that key">and a pencil</a>
    </p>
    <p>
        and the final <strong>pencil</strong>
    </p>
</div>

我试图用

做到这一点

$('.sth-key p').each(function(){
    $(this).html($(this).html().replace('key','pencil'));
});

或使用text（）......但它不起作用。

Answer 1

您必须使用.contents()方法才能在DOM树中搜索这些元素的直接子元素。

此外，您必须使用replace方法才能replace您的文字。

我使用了each()函数来浏览p元素的所有子元素。

nodeType属性返回指定节点的节点类型作为数字。

以下是main节点类型：

如果节点是element节点，则nodeType属性将返回1.

如果节点是attribute节点，则nodeType属性将返回2.

如果节点是text节点，则nodeType属性将返回3.

＆＃13;

$('.sth-key p').each(function(){
	$(this).contents().each(function () {
            if (this.nodeType === 3) 
                this.nodeValue=$(this).text().replace("key", "pencil")
            if(this.nodeType===1)
                $(this).html( $(this).html().replace("key", "pencil") )
        });   
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sth-key">
    <p>
        key here <span class="keyify">and here a key</span>
        <a href="/key-anything" title="dont change that key">and a key</a>
    </p>
    <p>
        and the final <strong>key</strong>
    </p>
</div>

＆＃13;

Answer 2

只需使用文本方法并传递一个函数，将所有'key'替换为'pencil'。

$(".sth-key").text(function () {
    return $(this).text().replace("key", "pencil"); 
});

我还没有测试过，但我认为它有效。

Answer 3

我将"key"替换为/key/g，这是一个将全局搜索的正则表达式。如果你像你一样使用替换，它将在第一次停止。

＆＃13;

$(function() {
  $('.sth-key p').each(function() {
    $(this).html($(this).html().replace(/key/g, 'pencil'));
  });
})

＆＃13;

<div class="sth-key">
  <p>
    key here <span class="keyify">and here a key</span>
    <a href="/key-anything" title="dont change that key">and a key</a>
  </p>
  <p>
    and the final <strong>key</strong>
  </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

以下是更多信息：String.prototype.replace

Answer 4

$('.sth-key p').each(function(i,elem){
    let html = $(elem).html().replace(/key/g,'pencil');
    $(this).html(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sth-key">
<p>
    key here <span class="keyify">and here a key</span>
    <a href="/key-anything" title="dont change that key">and a key</a>
</p>
<p>
    and the final <strong>key</strong>
</p>
</div>

Answer 5

根据contents：

获取匹配元素集中每个元素的子元素，包括文本和注释节点。

你可以：

$('.sth-key p').contents().each(function(idx, ele) {
  // get only TEXT_NODE or ELEMENT_NODE 
  if (ele.nodeType === 3 || ele.nodeType === 1) {
    ele.textContent = ele.textContent.replace('key','pencil');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="sth-key">
    <p>
        key here <span class="keyify">and here a key</span>
        <a href="/key-anything" title="dont change that key">and a key</a>
    </p>
    <p>
        and the final <strong>key</strong>
    </p>
</div>

Answer 6

下面的代码遍历所有文本节点，并将key字替换为pencil

$('.sth-key p').each(keyToPencil);

function keyToPencil() {
  var iter = document.createNodeIterator(this, NodeFilter.SHOW_TEXT);
  while (node = iter.nextNode()) {
    node.data = node.data.replace(/key/g, 'pencil');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sth-key">
  <p>
    key here <span class="keyify">and here a key</span>
    <a href="/key-anything" title="dont change that key">and a key</a>
  </p>
  <p>
    and the final <strong>key</strong>
  </p>
</div>

Answer 7

此代码仅在p中仅显示文本时才会替换。如果p内的文本中的文本不替换

$(".sth-key p").text(function (_, ctx) {
    return ctx.replace("key", "pencil");
});

jQuery：替换链接中的文本但不替换标签中的文本

7 个答案: