javascript - 通过 PHP(WP 插件)将数组发送到前端 JS 变量，然后替换页面上的 href 链接(如果存在)

Question

我开发了一个自定义 WordPress 插件，它已部分完成，它使用从单独插件中提取的客户编号。然后，我获取客户#，通过 PDO 连接将其传递到本地数据库(内部)，并返回 Amazon S3 中音频文件的一组自定义链接。这些链接从 10 个链接到约 138 个链接不等。他们有一个“productID”，它将被设置为下载链接前端页面上的 id="productIDhere"。

我需要将数组传递给 JavaScript，然后让 JavaScript 替换这些 URL(如果存在)，如果不存在，则继续并保留默认链接。

1.) 如何将数组从 WP 插件传递到 JavaScript？

2.) 我将如何编码 JavaScript 来获取数组，然后搜索要替换的 html 链接，然后实际替换它们(如果它们存在于数组中)。

Answer 1

How do I pass the Array over to JavaScript from the WP plugin?

WordPress HeartBeat API 非常适合此类功能。由于您没有提供示例代码，我将使用我自己的示例。另外，请查看本教程:http://code.tutsplus.com/tutorials/the-heartbeat-api-getting-started--wp-32446

还有一些附加文档:https://developer.wordpress.org/reference/hooks/heartbeat_received/

<?php
add_filter( 'heartbeat_received', function ( $response, $data, $screen_id ) {
    if ( isset( $data['something-to-enqueue'] ) ) {
        $response['something-to-enqueue'] = array('some-array' => 'this is my array');
    }
    return $response;
}, 10, 3 );
?>

var name = 'something-to-enqueue';

wp.heartbeat.enqueue(name, {
  'key': 'some-key',
  'value': 'some-val'
}, false);

wp.heartbeat.connectNow();

jQuery(document).on('heartbeat-tick.' + name, function(event, data) {
  console.log(data[name]);
  /* do something with the array from php */
  wp.heartbeat.dequeue(name);
});

How would I code the JavaScript to pick up the array, then search for the html links to replace, then actually replace them if they exist within the array.

这部分答案是用 ES6 编写的。

<p>Lorem ipsum dolor sit amet, <a href="http://stackoverflow.com/questions/tagged/wordpress">wordpress on so</a> adipiscing elit. Duis tempor maximus purus, nec ullamcorper leo. Cras tortor ligula, blandit vel dolor eget, posuere eleifend dolor. Praesent tempus dui vel arcu imperdiet, eu placerat erat pulvinar. Vestibulum a <a href="http://stackoverflow.com/questions/tagged/javascript">javascript on so</a> viverra, feugiat ante pharetra, accumsan orci. Nulla vel lorem non odio ornare scelerisque quis a justo. Ut et placerat arcu. Ut dolor velit, interdum ac dolor aliquet, <a href="http://stackoverflow.com/">StackOverflow</a> pulvinar lacus. Vestibulum at nulla gravida, blandit lorem nec, hendrerit ipsum. Fusce dui odio, pellentesque at dictum sit amet, porttitor tincidunt ex.</p>

(function(urls){
    /**
     * rewrite links.
     * Rewrites the urls and domains respectively.
     * Do not analyze a link more than once.
     * Loop is resource heavy and has to go through every single link on page.
     */

    function getNewLinks (map, links) {
        /**
         * @param {object} map
         * Loop over all links and repalce origin with appropriate beta site
         */

        return [...links].map(function(link) {
            /** See if the link matches a key from the map */
            if (map.has(link.href)) {
                let newLink = link.href = link.href.replace(new RegExp(link.href, 'gi'), map.get(link.href)());
                return newLink;
            }
        }).filter(link => link !== null && link !== undefined);
    }

    var objectMap = new Map(),
        getHeartBeatAPI = () => 'http://wordpress.stackexchange.com/questions/tagged/heartbeat-api',
        getWPJS = () => 'http://wordpress.stackexchange.com/questions/tagged/javascript';


    /* you may need to do this differently, since you're url are from the heartbeat array, again you didn't provide any sample code to go off. */
    objectMap
        .set('http://stackoverflow.com/questions/tagged/wordpress', getHeartBeatAPI)
        .set('http://stackoverflow.com/questions/tagged/javascript', getWPJS);

    return getNewLinks(objectMap, urls);
}(document.links));