Question

我在div中有一块未标记的文本。我想解析文本并用包含处理程序的新表单元素替换某些关键字。一个例子是，当我看到文本＆＃34;日期：________＆＃34;我想用新的输入字段替换它时，给它一个唯一的id，然后附加一个.datepicker（）处理程序。

给出示例文本：

* Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。日期：________ Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 *

我尝试了以下内容：

$("#textdiv").replace(/Date:________/g, "<input type='text' id='textid_123'/>");  
$("#textid_123").datepicker();

虽然它创建了输入框，但它并没有附加datepicker（）处理程序。这并不让我感到惊讶，我猜测JQuery并不知道DOM的修改。

如果我的＆＃34;日期＆＃34;被包裹在一个或另一个标签中，这将是微不足道的。有没有办法用JQuery可见的新DOM元素替换纯文本？

Answer 1

Uncaught TypeError: $(...).replace is not a function。

您应该替换元素的innerHTML，如下所示：

$("#textdiv").html( 
   $("#textdiv").html().replace(/Date:________/g, "<input type='text' id='textid_123'/>") 
); 

console.log( $('#textid_123') );  // yup, it's there, so .datepicker should work

BTW：你在正则表达式中使用/g标志，这意味着你希望替换Date: ___的多个实例。在这种情况下，您不应该在新的输入元素上使用硬编码的id，因为ID必须是唯一的。

http://jsfiddle.net/hfxvoL56/

Answer 2

问题不在于jQuery没有获取内容更改，因为内容在.datepicker调用之前已更改。问题是.replace()不是有效的jQuery方法。而是替换HTML内容，如下所示：

var content = $("#textdiv").html().replace(/Date:________/g, "<input type='text' id='textid_123'/>");
$("#textdiv").html(content);

然后你可以调用其他方法。 Example JSFiddle

.replace（）具有新DOM元素的任意文本

2 个答案: