如何将文本从一个元素复制和修改到另一个元素？

Question

我是 JQuery 新手，我要问的问题对你们大多数人来说非常简单。

我需要创建一个 id 为“original”且内容为“This is the original text”的段落标签。我想创建一个 id 为“clone”的空段落标签。

我想编写一个脚本，将“#original”文本的值存储在一个变量中，将“original”一词替换为另一个变量中的“clone”一词，并将该值放入“#clone”中。

结果：会有两段，一段说“这是原文”。还有一句说“这是克隆文本。”

请解释我怎样才能尽可能简单地做到这一点:) 提前谢谢你。

Answer 1

您将需要使用 jQuery .text() 函数，该函数允许您将文本内容存储到变量中。

var originalText = $("#original").text();

然后你可以像这样操作那个变量。

var modifiedText = originalText.replace("original", "cloned");

然后，使用相同的 .text() 函数，您可以将文本写入克隆的元素。

$("#clone").text(modifiedText);

这是一个工作示例： http://jsfiddle.net/DLeGa/

当然，您也可以在一行中完成所有这些操作。

$("#clone").text($("#original").text().replace("original", "cloned")); 

或者你可以把它变成一个可重用的函数。

function cloneText(srcSelector, destSelector, stringToReplace, replaceWith) {
  var text = $(srcSelector).text();
  var modifiedText = text.replace(stringToReplace, replaceWith);
  $(destSelector).text(modifiedText);    
}

// Usage
cloneText("#original", "#clone", "original", "cloned");