jquery html() 去掉脚本标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4079179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery html() strips out script tags
提问by brpaz
I need to replace the content of a div in my page with the html resultant from an ajax call. The problem is that the html have some necessary scripts in it and it seems that jquery html() function stripts them out, I need to filter the response and only get a specific div.
我需要用 ajax 调用产生的 html 替换页面中 div 的内容。问题是 html 中有一些必要的脚本，似乎 jquery html() 函数将它们剥离出来，我需要过滤响应并只获取特定的 div。
I am thinking on a workaround which is to extract all the script tags from the ajax response and then append them do the DOM but i am having trouble doing that.
我正在考虑一种解决方法，即从 ajax 响应中提取所有脚本标签，然后将它们附加到 DOM 中，但我在这样做时遇到了麻烦。
Here is my code;
这是我的代码；
$('a.link-vote').live('click',function(){
var idfeedback = $(this).attr('id').split('-')[1];
var href = $(this).attr('href');
$('.feedback-' + idfeedback + '-loader').show();
$.ajax({
type: "POST",
url: href,
success: function(response){
var x = $(response).find('#feedback-'+ idfeedback).html();
$('.feedback-' + idfeedback + '-loader').hide();
$('#feedback-'+ idfeedback).html(x);
}
});
return false;
});
I found this old topic: jQuery - script tags in the HTML are parsed out by jQuery and not executed
我发现了这个老话题： jQuery - HTML 中的脚本标签被 jQuery 解析出来，并没有被执行
but the is any conclusion. I tried the solutions suggested there but none of them work.
但这是任何结论。我尝试了那里建议的解决方案，但没有一个有效。
EDIT: I seem to found a workaround based on that old topic but it′s not pretty;
编辑：我似乎找到了基于那个旧主题的解决方法，但它并不漂亮；
var dom = $(response);
// var x = $(response).find('#feedback-'+ idfeedback).html();
$('.feedback-' + idfeedback + '-loader').hide();
//$('#feedback-'+ idfeedback).html(x);
$('#feedback-'+ idfeedback).html(dom.find('#feedback-'+ idfeedback).html());
dom.filter('script').each(function(){
var obj = $(this);
$('#feedback-'+ idfeedback + ' .feedback-comments').append(obj);
});
There must be a easy way.
必须有一个简单的方法。
采纳答案by eyelidlessness
Edit: I'm tired and not thinking. You can just use the native innerHTMLmethod instead of .html():
编辑：我累了，不想思考。您可以只使用本机innerHTML方法而不是.html()：
$('#feedback-' + idfeedback)[0].innerHTML = x;
Original answer:
原答案：
My hunch is that the answer you linked doesn't work for you because the included scripts are called with a srcattribute rather than script content between the <script>and </script>tags. This might work:
我的预感是您链接的答案对您不起作用，因为包含的脚本是使用src属性而不是<script>和</script>标记之间的脚本内容调用的。这可能有效：
$.ajax({
url: 'example.html',
type: 'GET',
success: function(data) {
var dom = $(data);
dom.filter('script').each(function(){
if(this.src) {
var script = document.createElement('script'), i, attrName, attrValue, attrs = this.attributes;
for(i = 0; i < attrs.length; i++) {
attrName = attrs[i].name;
attrValue = attrs[i].value;
script[attrName] = attrValue;
}
document.body.appendChild(script);
} else {
$.globalEval(this.text || this.textContent || this.innerHTML || '');
}
});
$('#mydiv').html(dom.find('#something').html());
}
});
Note, this has not been tested for anything and may eat babies.
请注意，这尚未经过任何测试，可能会吃掉婴儿。
回答by Fidelis
I had the same problem, but with more issues which I couldn't fix that easily. But I found a solution:
我有同样的问题，但有更多我无法轻松解决的问题。但我找到了一个解决方案：
This is my pseudo-source (HTML) that I couldn'tchange in any way.
这是我无法以任何方式更改的伪源 (HTML) 。
<html>
<body>
<div id="identifier1">
<script>foo(123)</script>
</div>
<div id="identifier2">
<script>bar(456)</script>
</div>
</body>
</html>
I used $.get()to fetch this HTML page.
Now that I have the code as a string, it's time to search in it with jQuery.
My aim was, to isolate the Javascript-Code inside the <script>-Tag, that belongs to the DIV identifier2, but not to identifier1. So what I wanted to get is bar(456)as a result string.
Due to the reason, that jQuery strips all script-Tags, you cannotsearch like this anymore:
我曾经$.get()获取过这个 HTML 页面。现在我将代码作为字符串，是时候用 jQuery 搜索它了。我的目标是，在<script>-Tag 中隔离属于 DIVidentifier2而不是identifier1. 所以我想得到的是bar(456)一个结果字符串。由于 jQuery 删除了所有脚本标签的原因，您不能再像这样搜索：
var dom = $(data); //data is the $.get() - Response as a string
var js = dom.filter('div#identifier2 script').html();
The solution is a simple workaround. In the beginning we will replace all <script>-Tags with something like <sometag>:
解决方案是一个简单的解决方法。一开始，我们将用以下内容替换所有<script>-Tags <sometag>：
var code = data.replace(/(<script)(.*?)(<\/script>)/gi, '<sometag</sometag>');
var dom = $(code);
var result = dom.find('div#identifier2 sometag').html();
//result = bar(456)
It's a simple hack, but it works!
这是一个简单的黑客，但它的工作原理！
回答by Peter Hrebik
This is the easiest solution:
这是最简单的解决方案：
var keepScripts;
keepScripts = true;
$.parseHTML(yourHtmlString, keepScripts);
This will keep the script tags in ;)
这将使脚本标签保持在 ;)
回答by Z. Zlatev
Try
尝试
$('#feedback-'+ idfeedback).empty().append(response);
I didn't tested. Not sure if .html()really strips <script>but give this a try.
我没有测试。不确定是否.html()真的脱衣，<script>但试一试。
回答by diewland
Can you show me the result html structure ?
你能告诉我结果 html 结构吗？
UPDATE 2010/11/03
更新 2010/11/03
You can eliminate <script>tag from .html()result with regular expression.
From your first code, after this line.
您可以使用正则表达式<script>从.html()结果中消除标签。
从您的第一个代码开始，在此行之后。
var x = $(response).find('#feedback-'+ idfeedback).html();
You can do something like this.
你可以做这样的事情。
x = x.replace(/\n/g, '{n}')
.replace(/<script.*?<\/script>/g, '')
.replace(/{n}/g, '\n');
