Question

我需要在html头中插入新标签。不在文档中，在包含html的字符串中。所以正则表达式才是唯一的方式。

<head>
<title>Html</title>
</head>

得到这样的东西：

<head>
<title>Html</title>
<script src="some_path.js"></script>
</head>

还有更多：

<head>
<title>Html</title>
<script src="some_path.js"></script>
<script src="some_path_2.js"></script>
</head>

Answer 1

这是可能的。只需获取<head>元素并像往常一样添加子元素：

document.getElementsByTagName("head")[0].appendChild(whatever);

有关其工作原理的更多信息，您可以谷歌搜索“Javascript DOM”。

Answer 2

使用此：

function injectScript (id, src, async) {
    var js,
    fjs = document.getElementsByTagName("head")[0];

    if (document.getElementById(id))
        return;

    js = document.createElement("script");
    js.id = id;
    js.src = src;
    js.type = 'text/javascript';

    if (async) {
        js.async = true;
    }

    fjs.appendChild(js, fjs);
}

将阻止双重注入并支持异步脚本。

Answer 3

如果您只将HTML作为字符串提供，而不是作为DOM文档提供，则可以在head-close标记之前进行简单插入，而无需使用正则表达式。以下代码使用了拼接方法in this answer。它可以成为一个函数而不是原型，并为我们的目的删除了第二个参数：

String.prototype.splice = function( idx, rem, s ) {
    return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};

var insertTag = function(newTag, html) {
  var end = html.indexOf('</head>');
  return html.splice(end, 0, newTag);
}

所以，如果你有

var doc = '<head><title>Html</title></head>';

你跑了

var doc = insertTag('<script src="some_path.js"></script>', doc);

你会得到

<head><title>Html</title><script src="some_path.js"></script></head>

该功能很简单，不会检查是否存在头部关闭标签，或者可能需要采取的任何其他安全问题。它会使用换行符，并且只是作为如何避免DOM（每个问题）和正则表达式的一般概念（为了节省您的理智）。

但是，如果您有可用的DOM - 请使用它。

Answer 4

(function(){
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'some_path.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})();

使用纯JavaScript在html头中插入新标签

4 个答案: