Question

此代码（见下文）将ID添加到标头标记中，然后可以用作锚点。它基本上将H1 / H2 ...文本转换为小写字母，用'-'替换空格并将其放入ID标签。

但是，此代码仅是Wordpress的过滤器。

问题： 如何修改它以使其在普通的独立PHP页面上正常工作，该页面的内容以echo $content;

显示

我是否尝试过这项工作？ 使用有限的编程语言，我试图使此代码起作用。无法做到。

我从事研究吗？ 我发现很多可用于WP的代码段/插件，但对于独立的PHP页面却没有。

目标是什么？ 以echo $content;为例，通过此代码运行它以清理H1 / H2 ...文本（小写，用'-'代替的空格），并将其放在相同H1 / H2的'ID'标记中，等等。然后可以用作锚点。

衷心感谢专家的任何帮助。

//Author URI: http://stephanis.info

add_filter( 'the_content', 'add_ids_to_header_tags' );
function add_ids_to_header_tags( $content ) {

    $pattern = '#(?P<full_tag><(?P<tag_name>h\d)(?P<tag_extra>[^>]*)>(?P<tag_contents>[^<]*)</h\d>)#i';
    if ( preg_match_all( $pattern, $content, $matches, PREG_SET_ORDER ) ) {
        $find = array();
        $replace = array();
        foreach( $matches as $match ) {
            if ( strlen( $match['tag_extra'] ) && false !== stripos( $match['tag_extra'], 'id=' ) ) {
                continue;
            }
            $find[]    = $match['full_tag'];
            $id        = sanitize_title( $match['tag_contents'] );
            $id_attr   = sprintf( ' id="%s"', $id );
            $replace[] = sprintf( '<%1$s%2$s%3$s>%4$s</%1$s>', $match['tag_name'], $match['tag_extra'], $id_attr, $match['tag_contents']);
        }
        $content = str_replace( $find, $replace, $content );
    }
    return $content;
}

注意：无论如何我都不隶属于上述插件。我只是想在独立的PHP页面上使用该代码/类似代码。

@kry所截取的代码按您说明的方式工作。但是当我尝试像下面那样使用它时，它什么也没做。

当前文件：

<?php

$original_text = file_get_contents($url);

$content = $parser->text($original_text);

echo $content;

我要实现的目标：

<?php

$original_text = file_get_contents($url);

$content = $parser->text($original_text);

// Here I want to take the $content and add the text in the h1, h2... tags as 'ID'
// for the same tags after changing to lower case & replacing spaces with '-'

function add_ids_to_header_tags( $content ) {

    $pattern = '#(?P<full_tag><(?P<tag_name>h\d)(?P<tag_extra>[^>]*)>(?P<tag_contents>[^<]*)</h\d>)#i';
    if ( preg_match_all( $pattern, $content, $matches, PREG_SET_ORDER ) ) {
        $find = array();
        $replace = array();
        foreach( $matches as $match ) {
            if ( strlen( $match['tag_extra'] ) && false !== stripos( $match['tag_extra'], 'id=' ) ) {
                continue;
            }
            $find[]    = $match['full_tag'];
            $id        = sanitize_title( $match['tag_contents'] );
            $id_attr   = sprintf( ' id="%s"', $id );
            $replace[] = sprintf( '<%1$s%2$s%3$s>%4$s</%1$s>', $match['tag_name'], $match['tag_extra'], $id_attr, $match['tag_contents']);
        }
        $content = str_replace( $find, $replace, $content );
    }
    return $content;
}

function sanitize_title($title) {
    return str_replace(" ", "-", $title);
}

print add_ids_to_header_tags( $content );

不幸的是，该函数没有向h1，h2 ...标签添加任何内容。它只是返回与以前相同的内容。

源内容中的h1，h2标签的格式如下：

<h1>DataRun<a name="API_Quickdata"></a></h1>
<h2>Data Request Parameters<a name="API_Quickdata_RequestParameters"></a></h2>

我希望他们看起来像什么：

<h1 id="datarun">DataRun<a name="API_Quickdata"></a></h1>
<h2 id="data-request-parameters">Data Request Parameters<a name="API_Quickdata_RequestParameters"></a></h2>

Answer 1

（想发表评论，但已经太久了...）

无论如何，当前看来它可以在没有WP的测试服务器上运行。像这样的代码是：

$content = '<h1>kontent with whitespace</h1><h2>kontent2 without whitespaces</h2>';
function add_ids_to_header_tags( $content ) {

    $pattern = '#(?P<full_tag><(?P<tag_name>h\d)(?P<tag_extra>[^>]*)>(?P<tag_contents>[^<]*)</h\d>)#i';
    if ( preg_match_all( $pattern, $content, $matches, PREG_SET_ORDER ) ) {
        $find = array();
        $replace = array();
        foreach( $matches as $match ) {
            if ( strlen( $match['tag_extra'] ) && false !== stripos( $match['tag_extra'], 'id=' ) ) {
                continue;
            }
            $find[]    = $match['full_tag'];
            $id        = sanitize_title( $match['tag_contents'] );
            $id_attr   = sprintf( ' id="%s"', $id );
            $replace[] = sprintf( '<%1$s%2$s%3$s>%4$s</%1$s>', $match['tag_name'], $match['tag_extra'], $id_attr, $match['tag_contents']);
        }
        $content = str_replace( $find, $replace, $content );
    }
    return $content;
}

function sanitize_title($title) {
    return str_replace(" ", "-", $title);
}

print add_ids_to_header_tags( $content );

如您所见，我在末尾添加了replace，并在开始时剪切了WP函数。最终结果是：

<h1 id="kontent-with-whitespace">kontent with whitespace</h1><h2 id="kontent2-without-whitespaces">kontent2 without whitespaces</h2>

这意味着它当前有效，我认为您希望这种情况发生。请注意，如果两个标签具有相同的内容，则它们也将具有相同的名称。如果这不是您想要的，请说明您要达到的最终状态。

Answer 2

正如我简短提到的那样，使用Javascript这项任务相对简单，因此我整理了一个快速演示。要查看最终结果，您需要使用开发人员工具（例如Google Chrome浏览器上的F12等）inspect html

要在PHP中完成相同的操作，我想您需要使用Output Buffering，然后在将缓冲区刷新到浏览器之前运行搜索/替换〜这样会给服务器增加更多负载，而使用javascript会使它工作给客户。

<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>search DOM for h1,h2 (only) and modify ID</title>
        <style>
            body, body *{
                box-sizing:border-box;
                font-family:calibri,verdana,arial;
                font-size:1rem;
            }
            p{width:90%;float:none;font-style:italic;margin:0.25rem auto;text-indent:-2rem;}
            p:first-letter{font-size:1.5rem;color:gray;border:1px solid silver;border-radius:0.1rem;background:whitesmoke;padding:0.1rem;}
        </style>
        <script>
            document.addEventListener('DOMContentLoaded',function(){
                /* 
                    capture a reference to all h1 & h2 elements and iterate through using `forEach`
                    As `document.querySelectorAll` returns a nodelist it is not always possible in all
                    browsers to natively use `forEach` hence using `Array.prototype.slice.call` to 
                    generate as an array...
                */
                Array.prototype.slice.call( document.querySelectorAll('h1,h2') ).forEach(function(header){
                    /* the replacement character */
                    let chr='-';

                    /* simple regex to find space or underscore characters */
                    let pttn=new RegExp(/[\s_]/gi);

                    /* modified regex */
                    let pttn=new RegExp(/[\s_\:\/]/gi);

                    /* convert text of h1,h2 nodes to lower case and replace characters */
                    let text=header.textContent.toLowerCase().replace( pttn, chr ).replace( /\-{2,}/gi, chr );

                    /* 
                        if the h1,h2 already has an id - capture the id and manipulate using previous method.
                        multiple spaces are replaced as a single character ( hence chained `replace` cmds )
                    */
                    let existing=header.hasAttribute('id') ? header.getAttribute('id').replace( pttn, chr ).replace( /\-{2,}/gi, chr ) : false;

                    /*
                        create new ID
                    */
                    let id=existing ? [existing,text].join( chr ) : text;

                    /* Apply ID to element */
                    header.setAttribute( 'id', id );
                })
            },{ capture:false, once:false, passive:false } );
        </script>
    </head>
    <body>
        <h1>DataRun<a name="API_Quickdata"></a></h1>
        <h2>Data Request Parameters<a name="API_Quickdata_RequestParameters"></a></h2>

        <h1>Lorem Ipsum Hocus Pocus <a href='#'>Hyperlink to nowhere</a></h1>
        <p>Chrono ix no nullam viderer eleifend, dictas invenire delicatissimi in has. Aeque voluptatibus te eam, sit falli inermis corrumpit ea, timeam deserunt assentior no his. Tale vero impetus in has, oblique copiosae ea nam, cum ex nusquam similique. Sea in elit disputationi. Ei natum porro feugait eos, no has quas corpora indoctum.</p>
        <p>Septus pro no natum doctus honestatis. Usu ei cibo tantas, id habeo accumsan antiopam duo, ex vis esse suscipiantur consectetuer. In sed magna persequeris. Ea vel graece percipit consequat.</p>
        <p>Sit aperiam expetendis disputationi vel cu, has ei blandit conclusionemque. Sit illum inciderint cu, ex tempor detraxit pericula mei. Legere aliquam at eum, ea partem fierent gloriatur cum. Habeo apeirian sed ne. Iudico adipisci et vim, in civibus salutatus vis, pro et nisl fuisset.</p>

        <h2 id='slippery_orange_potus'>Nusquam delicatissimi - with an existing ID</h2>
        <p>Regis pro in meis iriure utroque, inimicus liberavisse suscipiantur ius id, mea habemus interpretaris at. Ea vix consul graeco praesent, no usu tacimates referrentur interpretaris. Stet animal consequuntur eos ea, eum suavitate temporibus voluptatibus at. Eu dictas nominati intellegat quo, et per semper omnesque. Fabulas invidunt id his, possit discere cu quo.</p>
        <p>Ocurreret et vehicula in, neque pretium nonummy urna orci a, mauris dui ut id tortor ullamcorper feugiat, consectetuer amet nulla vel ex, congue vel urna justo sit mus et. Wisi quam morbi convallis urna massa elementum. Sed dui. Pellentesque sed eget mollis, donec at vel wisi, tincidunt magna sequi tincidunt. Scelerisque et commodo.</p>

        <h1>Iudico adipisci et vim</h1>
        <p>ConstituamNe dolorem hendrerit definiebas pri. Nusquam delicatissimi duo no, ut noster tamquam honestatis vim. Justo ocurreret necessitatibus cu mea, in eirmod definiebas mea. Ex dolorem definiebas vituperatoribus quo, utinam vocent aliquam ut est, in pro nullam impedit suscipiantur. Eam ea porro ancillae. Eius numquam epicurei sed ei, mucius platonem accommodare mei eu, percipit accusata ad usu.</p>
        <p>Kino pro in patrioque sadipscing, in debet elaboraret constituam qui, per ne regione eruditi. Sit quis definiebas vituperata ut, mel veri adolescens te. Nam ea modus graece voluptua, vel in dicta veniam. Usu cu oratio accusamus interpretaris.</p>       
        <p>Sodales Pulvinar pede libero libero consequat. In in enim magnis odio dui, pretium iaculis erat sed condimentum, felis proin id. Amet viverra mauris lacus nunc justo. Felis viverra fusce et neque volutpat consectetuer. Lectus lacinia. Dui arcu justo neque vivamus fusce. Diam nulla ornare sodales ut vitae per, ipsum eu id lorem sed.</p>
    </body>
</html>

在独立的PHP页面中将ID标签添加到标题标签<h1> </h1> <h2>

2 个答案: