Question

目前我正在阅读一本新的HTML5书（HTML5。由PeterKröner撰写的Webseiten innovativ und zukunftssicher）。有一些例子说明如何教IE6-8来理解HTML5。一个策略看起来像这样（如果启用了Javascript）：

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
        <title>HTML5 in IE</title>
        <script>
            'abbr article aside audio canvas details figcaption
            figure footer header hgroup mark menu meter nav 
            output progress section summary time video'
            .replace(/\w+/g, function(n) {window.document.createElement(n)});
        </script>
    </head>
    <body>
    <section>
        <header>
                <h1>This is the header</h1>
        </header>
        <section>
            <h2>Chapter 1</h2>
                <p>
                Text, Text, Text, Text, Text...
                Text, Text, Text, Text, Text...
                Text, Text, Text, Text, Text...
                Text, Text, Text, Text, Text...     
                </p>
        </section>
        <footer>
            <p>
                This is the footer.
            </p>
        </footer>
     </section>
    </body>
</html>

当我在IE中打开调试器时，DOM是正确的。当我省略JS函数时，DOM被破坏了。所以这个例子有效。我不明白这个替换语句实际上是如何工作的。如果我理解string.replace正确，它应该已经用函数本身替换了字符串，但显然window.document.createElement被替换并且以某种方式正确地执行了每个“标记”，因此每个“标记”都被函数解析。为什么这样做？

Answer 1

您可以使用函数作为字符串replace()方法的第二个参数来替换字符串中匹配的字符。传递给函数的第一个参数是当前正则表达式匹配的字符串，在这种情况下，每个标签名称为“abbr”，“article”等，然后传递给window.document.createElement()。

有关详细信息，请参阅MDN。

Answer 2

'abbr article aside audio'.replace(/\w+/g, function(n) { console.log(n); });

产地：

abbr
article
aside
audio

<小时/> 对于找到的每个匹配，.replace(regex, callback)将以匹配作为参数执行回调。您的示例使用.replace()的此属性为字符串中的每个单词创建一个dom元素。

使用Array：

的语义等效实现

var elems = ['abbr', 'article', 'aside', 'audio'];
for(var i = 0; i < elems.length; i++) {
    window.document.createElement(elems[i]);
}

我不明白为什么string.replace正确执行包含变量的函数？

2 个答案: