Question

假设我有以下字符串：

var myString = "<p>hello</p><script>console.log('hello')</script><h1>Test</h1><script>console.log('world')</script>"

我想使用split来获取包含脚本标记内容的数组。例如我希望我的输出是：

["console.log('hello')", "console.log('world')"]

我尝试过myString.split(/[<script></script>]/)但是没有得到预期的输出。

感谢任何帮助。

Answer 1

You can't parse (X)HTML with regex

相反，您可以使用innerHTML解析它。

var element = document.createElement('div');
element.innerHTML = myString; // Parse HTML properly (but unsafely)

但是，这不安全。即使innerHTML没有在script元素内部运行JS，恶意字符串仍然可以运行任意JS，例如与<img src="//" onerror="alert()">。

要避免此问题，您可以使用DOMImplementation.createHTMLDocument创建一个新文档，该文档可用作沙盒。

var doc = document.implementation.createHTMLDocument(); // Sandbox
doc.body.innerHTML = myString; // Parse HTML properly

或者，新浏览器支持DOMParser：

var doc = new DOMParser().parseFromString(myString, 'text/html');

将HTML字符串解析为DOM后，您可以使用getElementsByTagName或querySelectorAll等DOM方法获取所有script元素。

var scriptElements = doc.getElementsByTagName('script');

最后，[].map可用于获取每个script元素textContent的数组。

var arrayScriptContents = [].map.call(scriptElements, function(el) {
    return el.textContent;
});

完整的代码将是

var doc = document.implementation.createHTMLDocument(); // Sandbox
doc.body.innerHTML = myString; // Parse HTML properly
[].map.call(doc.getElementsByTagName('script'), function(el) {
    return el.textContent;
});

Answer 2

Javascript代码：

   function myFunction() {
        var str = "<p>hello</p><script>console.log('hello')</script><h1>Test</h1><script>console.log('world')</script>";

        console.log(str.match(/<script\b[^>]*>(.*?)<\/script>/gm));
}

Answer 3

你必须像这样逃避正斜杠：/。

 myString.split(/(<script>|<\/script>)/)

在字符串中解析脚本标记的内容

3 个答案: