我有一个页面,所有脚本都移到底部,就在关闭'body'标签之前。 此页面可能包含一个特殊符号,必须在$(document).ready()。
上动态替换对于这种情况,我通常使用这个简单的技巧:
$('body').html($('body').html().replace('special_symbol', 'new_value'));
如果脚本位于标题中,则此代码可以正常工作。
但是如果脚本移动到底部,则此代码会导致无限页面刷新 所以,问题是:是否有可能动态更新全身HTML,而无需无限刷新? 或者可能有更好的方法来动态更新html substing而不指定其父类或id?
UPD:找到更换special_symbol的更好解决方案:
replaceTextInDom('original_value', 'new_value');
...
function replaceTextInDom(original_value, new_value){
var reg_exp = new RegExp(original_value, 'g');
$('div:contains('+original_value+')').each(function(){
if ($(this).clone().children('div').remove().end().text().indexOf(original_value) >= 0)
$(this).html($(this).html().replace(reg_exp, new_value));
});
}
答案 0 :(得分:1)
它可能看起来像一个简单的技巧,但它是我见过的最丑陋的JavaScript之一。
您的代码以文本字符串的形式抓取整个页面的HTML,然后用special_cymbol
替换new_value
,然后重新绘制整个页面当你更新它。矫枉过正?
无论如何,这就是发生的事情:
就像我说的那样,这一行 - $('body').html()
- 将整个HTML作为文本字符串抓取。 HTML中有什么内容?你的脚本标签。因此,当您更新整个页面的HTML时,您还会重新添加标签,这些标签会被下载,解析并再次执行,这是您更新页面的javascript代码所在的位置,然后将完全相同事情一遍又一遍又一遍。
修改强>
不要做你正在做的事情,这太可怕了。如果您需要更新文字special_cymbol
,那么每次在页面上输出文字时,请按以下步骤操作:
<span class="special_cymbol_class">special_cymbol</span>
然后你可以这样做:
$('.special_cymbol_class').html('new_value');
答案 1 :(得分:1)
尝试使用jQuery.parseHTML,将第三个参数jQuery.parseHTML( data [, context ] [, keepScripts ] )
设置为false
var body = $("body");
var html = $.parseHTML(body.html(), document, false);
$(html).each(function(i, html) {
return $(html).text(function(_, text) {
return text.replace(/special_cymbol/, "new_value")
})
});
body.html(html);
var body = $("body");
var html = $.parseHTML(body.html(), document, false);
$(html).each(function(i, html) {
return $(html).text(function(_, text) {
return text.replace(/special_cymbol/, "new_value")
})
});
body.html(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<script>
console.log($.now())
</script>
<div>abc</div>
<div>special_cymbol</div>
</body>