Question

我有以下代码：

<div class="TopMenu">
<h3>Create an Account</h3>
<h3>yup</h3>
<h3>lol</h3>
<a href="#">yo</a>
<ul>
    <li sytle="display:">
        <a href="#">start</a> or
         <a href="#">finish</a>

    </li>
</ul>

我正在使用：

    $('.TopMenu li:contains("or")').each(function() {
     var text = $(this).text();
    $(this).text(text.replace('or', 'triple'));  
});

它工作正常，但突然链接不活跃，我该如何解决？

非常感谢你。

Answer 1

这是你的jQuery在运行时基本上转换成的内容：

text = this.textContent;
// text = "\n\t\tstart or\n\t\t finish\n\t\t\n";
text = text.replace('or','triple');
// text = "\n\t\tstart triple\n\t\t finish\n\t\t\n";
this.textContent = text;
// essentially, remove everything from `this` and put a single text node there

好的，这不是一个很好的解释XD重点是，设置textContent（或者，在jQuery中，调用.text()），用该文本替换元素的内容

您想要做的只是影响文本节点。我不知道如何在jQuery中执行此操作，但这里有一些Vanilla JS：

function recurse(node) {
    var nodes = node.childNodes, l = nodes.length, i;
    for( i=0; i<l; i++) {
        if( nodes[i].nodeType == 1) recurse(node);
        else if( nodes[i].nodeType == 3) {
            nodes[i].nodeValue = nodes[i].nodeValue.replace(/\bor\b/g,'triple');
        }
    }
}
recurse(document.querySelector(".TopMenu"));

请注意，基于正则表达式的替换将阻止＆＃34;无聊＆＃34;从成为＆＃34; btripleing＆＃34;。使用Vanilla JS及其神奇的力量，或者我会将你连接起来！

Answer 2

由于or是文字节点，您可以使用 .contents() 以及 .replaceWith() 代替：

$('.TopMenu li:contains("or")').each(function () {
    var text = $(this).text();
    $(this).contents().filter(function () {
        return this.nodeType === 3 && $.trim(this.nodeValue).length;
    }).replaceWith(' triple ');
});

<强> Fiddle Demo

Answer 3

将.text()更改为.html()

$('.TopMenu li:contains("or")').each(function() {
  var text = $(this).html();
  $(this).html(text.replace('or', 'triple'));  
});

请参阅Fiddle

Answer 4

这是一项更复杂的任务。您需要替换文本节点中的文本（nodeType === 3），这可以通过contents()和each迭代来完成：

$('.TopMenu li:contains("or")').contents().each(function() {
    if (this.nodeType === 3) {
        this.nodeValue = this.nodeValue.replace('or', 'triple');
    }
});

所有其他方法都会重写<li>元素中的标记（删除所有附加事件），或者只删除内部元素。

正如下面的评论中所讨论的，傻瓜式解决方案将使用正则表达式替换，即this.nodeValue.replace(/\bor\b/g, 'triple')，它将所有or匹配为独立单词和不是单词的一部分。

DEMO： http://jsfiddle.net/48E6M/

Answer 5

<强> jsFiddle Demo

您可以通过这样做将锚点放入文本中。你应该迭代匹配的元素＆＃39; childNodes并且只在textContent上使用replace来避免修改任何html标签或属性。

$('.TopMenu li:contains("or")').each(function() {
 for(var i = 0; i < this.childNodes.length; i++){
    if(this.childNodes[i].nodeName != "#text") continue;
    this.childNodes[i].textContent = this.childNodes[i].textContent.replace(' or ', ' triple ');
 }
});

Answer 6

您需要我们.html()而不是.text()，

像这样：

$('.TopMenu li:contains("or")').each(function() {
 var text = $(this).html();
$(this).html(text('or', 'triple'));  
});

以下是一个实例：http://jsfiddle.net/7Mamj/

JQuery |用链接更改字符串的一部分

6 个答案: