jQuery 查找并替换为 div 的内容答案

【问题标题】：jQuery Find and replace with contents of a divjQuery 查找并替换为 div 的内容
【发布时间】：2012-12-10 17:36:27
【问题描述】：

我正在寻找用 jQuery 查找和替换文本，但只找到了将静态文本替换为其他静态文本的简单函数。我想弄清楚如何用另一个 div 的内容替换字符串。例如：

<div class="item-one">blue</div>

<p>My color is item one</p>

我想要做的是将字符串“item one”替换为带有 item-one 类的 div 的内容。我想要的不仅仅是这个字符串的一个实例，而是页面上的所有实例。我真的很感激这方面的任何帮助。谢谢

【问题讨论】：

标签： jquery replace

【解决方案1】：

你可以使用text方法：

$('p').text(function(i, current){
   var c = $('.item-one').text();
   return current.replace('item one', c);
})

http://jsfiddle.net/3eE4G/

如果您有更多元素：

$('p').text(function(i, t) {
   var w = t.split(' ')[4];
   var c = $('.item-'+w).text();
   return t.replace('item '+w, c)
})

http://jsfiddle.net/e7DRr/

【讨论】：

美丽。像魅力一样工作:)

【解决方案2】：

$('p').text($('p').text().replace('item one',$('.item-one').text()));

jsFiddle link.

提示：

如果“item-one”是唯一的，请使用ID 而不是类
您还应该向<p> 添加一个唯一的ID

【讨论】：

【解决方案3】：

两种方式

首先是使用 .replace() 函数，它可以将一些静态文本替换为 div 中的文本：

$("p").text($("p").text().replace("text", $("#some_text").text()));

但更好的方法是将要更改的文本改为“span”标签并使用 text() 函数

$("p span").text($(".item-one").text());

【讨论】：

您的脚本什么都不做，因为文本的更改值没有被保存。
是的，在 1 个函数中我犯了错误，这里是工作版本 jsfiddle.net/BdnPJ/1

【解决方案4】：

如果你想拥有这种完全动态的，不关心一个 div 有多少个类，以及应该使用多少次 div 的内容。

$(document).ready(function()
{
    var replaceClasses = [];
    var currentClasses;
    var i = 0;

    // Save all classes to be used for replacement in an array
    $('div').each(function()
    {
        currentClasses = $(this).attr('class').split(/\s+/);
        for (i; i < currentClasses.length; i++)
        {
            replaceClasses.push(currentClasses[i].replace('-', ' '));
        }
        i = 0;
    });

    // Loop all classes and replace text if applicable
    for (i; i < replaceClasses.length; i++)
    {
        var pText = $('p:contains("' + replaceClasses[i] + '")').text();

        $('p:contains("' + replaceClasses[i] + '")').each(function()
        {
            $(this).text($(this).text().replace(replaceClasses[i], $('.' + replaceClasses[i].replace(' ', '-')).text()));
        });
    }  

});

http://jsfiddle.net/KzCCQ/

【讨论】：