假设我们有一个页面,例如:
<html>
<body>
(111) 111.1111
<br />
(222) 222.2222
<br />
333 333 3333
<br />
444-444-4444
<script>
// replace all phone numbers with our own
var re = /\d{3}[().-\s[\]]*\d{3}[().-\s[\]]*\d{4}/g;
var sourcestring = document.documentElement.innerHTML;
var replacementpattern = "(111) 867-5309";
var result = sourcestring.replace(re, replacementpattern);
document.documentElement.innerHTML = result;
</script>
</body>
我们的页面加载正常,但它会显示原始电话号码大约 1/4 秒(非常引人注目)。
有没有办法从根本上停止显示其他号码,并在替换时仅显示 (111) 867-5309 字符串?
也许解决方案是在 html 出现时(但在显示之前)解析它?
编辑:
为了澄清起见,除了 javascript(将通过 src= 加载)之外,我无法访问 HTML 的其余部分
请您参考如下方法:
如果您可以修改页面足以移动脚本,则可以使其正常工作。
- 首先,将脚本放在内容之前(最好放在头部)。
- 您的代码应该位于一个可以在内容准备好后调用的函数。
- 使用您的函数处理 DOMContentLoaded 事件。 ( reference here ,如果您的浏览器不支持,则提供后备列表)
类似这样的事情:
<html>
<head>
<script>
function replacePhoneNumbers () {
// replace all phone numbers with our own
var re = /\d{3}[().-\s[\]]*\d{3}[().-\s[\]]*\d{4}/g;
var sourcestring = document.documentElement.innerHTML;
var replacementpattern = "(111) 867-5309";
var result = sourcestring.replace(re, replacementpattern);
document.documentElement.innerHTML = result;
}
document.addEventListener('DOMContentLoaded', replacePhoneNumbers);
</script>
</head>
<body>
...
</body>
</html>
如果你无法移动你的脚本,那么你就无能为力;在内容渲染完毕之前它不会被执行。