如何使用 Jquery 在整个 HTML 页面中替换占位符？答案

【问题标题】：how to replace a placeholder across a full HTML page using Jquery?如何使用 Jquery 在整个 HTML 页面中替换占位符？
【发布时间】：2012-03-30 23:00:48
【问题描述】：

我有一个 HTML 演示页面，其中包含一个占位符“||client||”。它在整个页面中使用，例如：

<img src="images/||_client_||/img1.jpg" />

或

<title>||_client_|| Demo</title>

等等。

我想在页面加载后用相应的客户端 ID 全局替换占位符。该页面仅用于演示目的，因此我不想设置任何服务器端。

我绑定到这个：

 $('div:jqmData(role="page")').on('pagebeforecreate', function() {  
  // replace ||_client_|| with some ID      
  });

问题：
是否有一种 Jquery 方法来运行 DOM 并找到我的占位符的所有实例并替换它们，或者我是否必须手动执行每个实例并查找所有 img 标签，检查 src 中的子字符串并替换此子字符串？一定有更好的方法吗？

感谢您的帮助！

【问题讨论】：

在服务器端做这个不是更好的主意吗？还是您使用的是静态 HTML？
这是一个静态模型。只有占位符会改变
不要认为有一个一站式的解决方案。您必须遍历每个可能的设置（属性、html、？）并使用类似.replace()

标签： jquery html string jquery-mobile replace

【解决方案1】：

这是一个将替换所有 '||client||' 的示例在整个文档中使用“replace_string”。

<html>
    <head>
        <title>||_client_|| Demo</title>
    </head>
    <body>
        <h1>||_client_||</h1>
        <img src="images/||_client_||/img1.jpg" />       
    </body>
    <script type="text/javascript">
        document.documentElement.innerHTML = document.documentElement.innerHTML.split('||_client_||').join('replace_string');
    </script>
</html>

【讨论】：

【解决方案2】：

为什么需要 jQuery？

document.body.innerHTML = document.body.innerHTML.replace(/\|\|_client_\|\|/g, 'your text here');

对于整个页面：

var html = document.getElementsByTagName('html')[0];
html.innerHTML = html.innerHTML.replace(...);

请注意，请确保在页面准备好之后（以便正文包含所有元素）以及将事件绑定到任何元素之前执行此操作。

【讨论】：

不一定是 jquery，所以这看起来也不错。包含文档头的任何方式（我还需要更改一些链接元素）
document.getElementsByTagName('html')[0].innerHTML，或document.head.innerHTML & document.body.innerHTML。

【解决方案3】：

其实你可以这样做：

//getting the html dom as string
var myStr = $("body").html();
//use reguler expression to replace your placeholder
myStr = myStr.replace(/\|\|\_client\_\|\|/gi,"Fareed");
//return it back to the dom
$("body").html(myStr);

注意：/gi 用于全局和不区分大小写

【讨论】：

【解决方案4】：

您可以使用 .html() 函数将整个页面转换为 html，然后替换占位符并使用 .html() 设置结果。这可能不会很高效，但它可能对你有用。

// Suppose we have a div with a test class: <div class="test">{PLACEHOLDER} title</div>
var div = $('.div')
var src = $(div).html()
src = src.replace('{PLACEHOLDER}', 'Test')
div.html(src)

// Your div now contains: <div class="test">Test title</div>

祝你好运！

【讨论】：

【解决方案5】：

您可以滚动浏览页面上的每个 <img /> 对象，然后进行搜索/替换。

$('div:jqmData(role="page")').on('pagebeforecreate', function() { 

    $('img').each(function(){
        var newVal = $(this).attr('src').replace('||_client_||', theClientId);
        $(this).attr('src', newVal);
    });

});

但是，我建议不要使用$('img')，而是改进选择器以仅循环遍历特定div $('#theDiv img') 或某个类$('img.placeholder') 中的图像。类选项可能是最好的。您只需将class="placeholder" 添加到要循环播放的每个图像。

【讨论】：

我喜欢捆绑的想法......这应该适用于和标签，不是吗？
这适用于任何具有src 属性的实体类型。