使用 jquery 替换 <div> 中 <p> 中的单词答案

【问题标题】：Replace word in <p> in <div> using jquery使用 jquery 替换 <div> 中 <p> 中的单词
【发布时间】：2013-10-19 13:52:12
【问题描述】：

我有一个具有以下结构的文档：

<div id="notice" class="box generalbox">
<p>
This is some text.
</p>
</div>

我想使用 jQuery 将单词“some”替换为单词“My”。

我该怎么做？

我试过了：

$("#notice").text().replace("some", "My");

但这没有用......

更新：感谢您的所有回复。我使用这个解决方案来让它工作：

$("#notice p").text($("#notice p").text().replace("some", "My"));

【问题讨论】：

您想用“My”替换所有“some”实例，还是只替换第一个？我知道在你的例子中只有一个实例，但是如果它是“这是一些带有一些单词的文本；它是上周某个时候写的。”

标签： jquery html text replace

【解决方案1】：

你需要定位#notice内的p标签：

$("#notice p").text(function(i, text) {
    return text.replace("some", "My");
});

2020 年 3 月更新

现在可以通过使用箭头函数使同样的逻辑变得更加简单：

$('#notice p').text((i, t) => t.replace('some', 'My'));

这适用于除 Internet Explorer 之外的任何浏览器。

【讨论】：

不客气。没有它你会得到很多支持，所以想象一下你会得到多少使用它......

【解决方案2】：

试试这个，相信你会得到你的结果。

$("#notice p").text(function(i, text) {
    return text.replace("some", "My");
});

【讨论】：

我发现这绝对是实现我的目标的最佳/最快的解决方案 :) 谢谢！

【解决方案3】：

Salmans 的答案效果很好，但如果段落中的单词超过 1 个，则不会被替换。所以改用这个：（使用全局匹配的正则表达式）

function replaceNodeText() {
    if (this.nodeType === 3) {
        this.nodeValue = this.nodeValue.replace(replaceNodeText.regex, replaceNodeText.replace);
    } else {
        $(this).contents().each(replaceNodeText);
    }
}
replaceNodeText.regex = /some/g;
replaceNodeText.replace = "my";
$("#notice").contents().each(replaceNodeText);

或者使用这个：

（我刚刚把.replace(x,y)改成了.split(x).join(y)，这比replace()快多了，见here)

function replaceNodeText() {
    if (this.nodeType === 3) {
        this.nodeValue = this.nodeValue.split(replaceNodeText.find).join(replaceNodeText.replace);
    } else {
        $(this).contents().each(replaceNodeText);
    }
}
replaceNodeText.find = "some";
replaceNodeText.replace = "my";
$("#notice").contents().each(replaceNodeText);

Demo on jsfiddle

【讨论】：

【解决方案4】：

这是一个矫枉过正，但无论如何：

function replaceNodeText() {
    if (this.nodeType === 3) {
        this.nodeValue = this.nodeValue.replace(replaceNodeText.find, replaceNodeText.replace);
    } else {
        $(this).contents().each(replaceNodeText);
    }
}
replaceNodeText.find = "some";
replaceNodeText.replace = "my";
$("#notice").contents().each(replaceNodeText);

此函数将保留指定元素中存在的任何 html。例如，它将适用于以下 HTML：

<div id="notice" class="box generalbox">
    <p>This is<br>some text.</p>
    <p>This is so<br>me text.</p>
    <p>This is <b>some</b> text.</p>
</div>

并产生以下输出：

<div id="notice" class="box generalbox">
    <p>This is<br>my text.</p>
    <p>This is so<br>me text.</p>
    <p>This is <b>my</b> text.</p>
</div>

Demo here

【讨论】：

【解决方案5】：

试试这个解决方案：

newtext = $("#notice p").text().replace("some", "My"); 
$("#notice p").text(newtext);

【讨论】：

【解决方案6】：

试试这个

$('#notice').html().replace("some", "my");

【讨论】：

有什么问题？？它给了我<p>This is my text.</p>
我有理由确定 OP 想要用替换的文本更新页面。

【解决方案7】：

var text = $("#notice p").text()
text = text.replace("some", "My");
$("#notice p").text(text);

【讨论】：

【解决方案8】：

阅读http://api.jquery.com/text/#text-functionindex--text

$("#notice p").text(function (_, ctx) {
    return ctx.replace("some", "My");
});

或

$("#notice p").text($("#notice p").text().replace("some", "My"));

或

var  p_tag = $("#notice p");
p_tag.text(p_tag.text().replace("some", "My"));

【讨论】：

在没有 jquery 的情况下有没有办法做到这一点？以 HTML 或 CSS 为例？
第三个选项复制元素，第一个选项完美运行