Question

棘手的部分不是在这里选择元素，而是选择其中的文本。将为您提供文本内容的唯一真正的jQuery是.contents（）。所以我得到的每个元素的内容都不是他的页面，我想挑出一个单词，比如“hashtag”。然后追加它。

我在这里做错了什么：

<html>
<p>
The word hashtag is in this sentence.
</p>
</html>

jQuery的：

$(function() {
    $('*')
        .contents()
        .filter(function(){
            return this.nodeType === 3;
        })
        .filter(function(){
            return this.nodeValue.indexOf('hashtag') != -1;
        })
        .each(function(){
            alert("It works!")
        });
});

$('*')抓住每个元素

.contents()抓取每个元素的内容

.filter(function(){ return this.noteType === 3;将其细化为元素的文本内容。（＃3节点类型是文本）

return this.nodeValue.indexOf('hashtag')应该抓住“hashtag”这个词。不确定这是否有效。

!= -1;应该阻止它抓取HTML中的每个元素。不确定那个。

为什么不起作用？我知道我还有附加标签，但是我可以选择“hashtag”这个词谢谢！

Answer 1

JS：

function replaceText() {
    $("*").each(function() {
        if($(this).children().length==0) {
           $(this).html($(this).text().replace('hashtag', '<span style="color: red;">hashtag</span>'));
        }
    });
}
$(document).ready(replaceText);
$("html").ajaxStop(replaceText);

HTML：

<html>
<p>
The word hashtag is in this sentence.
</p>
</html>

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

来源：jQuery - Find and replace text, after body was loaded

这是用span完成的，但显然可以使用

Answer 2

如果您想对整个页面执行此操作，您可以处理body元素的HTML：

$(function() {
    var regExp = new RegExp("\\b(" + "hashtag" + ")\\b", "gm");
    var html = $('body').html();
    $('body').html(html.replace(regExp, "<a href='#'>$1</a>"));
});

请注意，如果您的网页很大，这可能会很慢。此外，所有元素都将被重写，从而松散其事件处理程序等。

如果您不想要或者想要将替换限制为某些元素，您可以选择并迭代它们：

$(function() {
    var regExp = new RegExp("\\b(" + "hashtag" + ")\\b", "gm");
    $('div, p, span').each(function() {  // use your selector of choice here
        var html = $(this).html();
        $(this).html(html.replace(regExp, "<a href='#'>$1</a>"));
    });
});

Answer 3

我不太了解jQuery，但我认为你不能只说.indexOf('hashtag')，你必须遍历文本本身。让我们说用子串。可能有一个jQuery函数会为你做这个，但这可能是你找到'hashtag'的问题。

Answer 4

clean 变体将是：

$(function() {
    var searchTerm = 'hashtag';

    $('body *').contents()
    .filter(function () { 
        return this.nodeType == 3 
               && this.nodeValue.indexOf(searchTerm) > -1; 
    })
    .replaceWith(function () {
        var i, l, $dummy = $("<span>"),
            parts = this.nodeValue.split(searchTerm);

        for (i=0, l=parts.length; i<l; i++) {
            $dummy.append(document.createTextNode(parts[i]));
            if (i < l - 1) {
                $dummy.append( $("<a>", {href: "", text: searchTerm}) );
            }
        }
        return $dummy.contents();
    })
});

它将文本节点的值拆分为searchTerm，并将这些部分重新连接为新文本节点或<a>元素的序列。以这种方式创建的节点将替换相应的文本节点。

这样，所有文字值都保持其原始含义，当您在其上调用replace()并将其提供给.html()时（考虑包含HTML特殊字符的文字），无法保证这些值。

参见jsFiddle：http://jsfiddle.net/Tomalak/rGcxw/

如何使用jQuery将<a></a>标签附加到元素中的特定单词

4 个答案: