使用javascript将html占位符文本替换为html元素

Replace html placeholder text with html element using javascript

本文关键字：html 元素 文本替换 占位符 使用 javascript      更新时间：2023-09-26

我有一个场景，在我的页面中有一个占位符文本，我将在页面完全加载后替换它。我的问题是，我需要替换的文本是repatcha图像的插件，例如：

我有文本loading...，它将被替换为：

<recaptcha:recaptchacontrol ID='recaptcha' runat='server' PublicKey='kfldsjfh4378qyf43h4eidfhew' PrivateKey='sdflkdsfy908s6dfdsfkj' Theme='clean' />

我找不到这样做的方法，任何帮助都将不胜感激。

在聊天中找到了答案：

由于<recaptcha:...>标签是由一些服务器端插件解析的，所以在客户端JS中写入它们后，它们并没有被呈现。所以替换很好，但插件没有。。。

您可以在document.body.innerHtml:上执行任何字符串操作（如搜索和替换）

document.body.innerHtml = document.body.innerHtml.replace(/Loading'.'.'./g,
                                                          "<recaptcha...>");

用唯一id（如）将"Loading…"文本包装在<span>中

<span id="removeme">Loading...</span>

然后，如果你不想用这个复杂的、有名称空间的标签做太多DOM fu，你可以做以下事情：

var removeme = document.getElementById('removeme');
removeme.innerHTML = "<recaptcha:recaptchacontrol ...";
var recaptchaThing = removeme.firstChild;
removeme.removeChild(recaptchaThing);
var parent = removeme.parentNode;
parent.insertBefore(recaptchaThing, removeme);
parent.removeChild(removeme);

这将用<recaptcha:recaptchacontrol>元素替换<span>，然后让浏览器了解如何为这个奇怪的元素构建DOM。如果<recaptcha:recaptchacontrol>不能放置在<span>元素内部，则将其改为<div style="display:inline">。

相关文章：