Question

我写了一个函数，它接受一个数组并附加html或执行内联js或外部js。有没有更清晰的方法来检测脚本src，可能使用单个正则表达而不是条件？

这是jsfiddle： http://jsfiddle.net/nfrobmxt/

<!doctype>
<html>
<head></head>

  <body>

<div id="content"></div>

<script>

// Execute inline js.
function _append(selector, arr) {
    var content = arr;
    for(var i = 0; i< content.length; i++) {
        var _content = content[i];
        var js = _content.indexOf('script');
        var src = _content.indexOf('src=');
        // Script tag.
        if(js > -1) {
            var inline = '';
            var script = document.createElement('script');
            script.type = 'text/javascript';
            if(src > -1) {
                script.src = 'http://chrismills.la/test.js';
            } else {
                _content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(){
                    inline += arguments[1] + '\n';
                });
                script.text = inline;
            }
            selector.appendChild(script);
        } else {
            selector.innerHTML += _content;
        }
    }
}
// Selector - div or tag.
var selector = document.body;

// String with inline javascript.
var arr = [];
// Inline javascript.
arr.push('<script>alert("inline javascript");</\script>');
arr.push('<script>alert("more inline javascript");</\script>');
// External script.
arr.push('<script src="http://chrismills.la/test.js"></\script>');
// HTML.
arr.push('<p>Content.</p>');
arr.push('<p>More Content.</p><p>More Content 2.</p>');

_append(selector, arr);
    </script>

      </body>
</html>

Answer 1

不是一个理想的解决方案，但我能够将其作为一个功能完成。

// Append js and html.
function _append(selector, arr) {
    var content = arr;
    for(var i = 0; i< content.length; i++) {
        var _content = content[i];
        var js = _content.indexOf('script');
        if(js > -1) {
            // Script tag.
            var script = document.createElement('script');
            script.type = 'text/javascript';
            var regex = /<script.*?src="(.*?)"/gmi;
            var url = regex.exec(_content);
            var inline = '';
            if(url) {
                script.src = url[1];
            }
            _content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(){
                inline += arguments[1] + '\n';
            });
            script.text = inline;
            selector.appendChild(script);
        } else {
            // html content.
            selector.innerHTML += _content;
        }
    }
}
// Selector - div or tag.
var selector = document.body;

// String with inline javascript.
var arr = [];
// Inline javascript.
arr.push('<script>alert("inline javascript");</\script>');
arr.push('<script>alert("more inline javascript");</\script>');
// External script.
arr.push('<script type="text/javascript" src="http://chrismills.la/test.js"></\script>');
// HTML.
arr.push('<p>Content.</p>');
arr.push('<p>More Content.</p><p>More Content 2.</p>');

_append(selector, arr);

Answer 2

Jon Snow的评论提出了一个更简单的解决方案。例如：

var counter = 0;
var scripts = document.getElementsByTagName('script');
Array.prototype.forEach.call(scripts, function(script, index){
  if( !script.hasAttribute("src") ){counter++;}
});
console.log(scripts.length +" total script tags. "+counter + " inline script tags found" )

javascript正则表达式检测内联javascript或外部脚本

2 个答案: