为带唯一链接的玩家列表实现复制链接按钮（PHP&JavaScript）

问题根源 #

你遇到的Unexpected token ':'错误，核心原因是拼接onClick事件时，直接将URL字符串传入JS函数却未加引号。生成的HTML会变成类似这样的错误格式：

<button type="button" onClick="copyToClipboard(https://example.com/player/1)" ...> Copy link </button>

JS解析时会把URL里的冒号当成语法错误，因为它要求字符串参数必须用引号包裹。

修复方案 #

给传递的URL加上单引号，同时用WordPress内置的esc_js()函数转义字符串，避免引号冲突和XSS风险；另外用esc_url()转义URL属性值，符合HTML规范。修改按钮的代码行：

原错误代码：

<button type="button" onClick="copyToClipboard(' . $player_link . ')" name="copied_link" value="' . $player_link . '"> Copy link </button>

修改后代码：

<button type="button" onClick="copyToClipboard(\'' . esc_js($player_link) . '\')" name="copied_link" value="' . esc_url($player_link) . '"> Copy link </button>

• esc_js()：专门转义JS字符串，确保单引号、特殊字符不会破坏JS语法结构
• esc_url()：转义URL属性值，避免不符合规范的字符导致HTML解析问题

另外你完全不需要用Ajax，纯前端的navigator.clipboard.writeText()就能实现无刷新复制，你的JS函数本身逻辑没问题，只需要修正参数传递的语法错误。

完整修改后的代码片段 #

<?php
// Fetching the players //

foreach($players as $player) {
    $player_email = get_post_meta($player->ID, 'email')[0];
    $player_status = get_post_meta($player->ID, 'status')[0];
    $player_link = get_permalink($player->ID);
    
    if ($player_status == 'Not completed') { array_push($not_completed_players, 'true'); }
    $return_html .= '
    <li class="players-div">
      <div class="players-text-div"> 
        <p class="players-list-p players-name"> ' . $player->post_title . ' </p>
        <p class="players-list-p players-email"> ' . $player_email . ' </p>
      </div>

      <a class="players-list-p" href="' . esc_url($player_link) . '"> /' . basename($player_link) . ' </a>
      <p class="players-list-p players-email"> ' . $player_status . ' </p>

      <button type="button" onClick="copyToClipboard(\'' . esc_js($player_link) . '\')" name="copied_link" value="' . esc_url($player_link) . '"> Copy link </button>
    </li>';
 }

?>

<script>
  function copyToClipboard(playerLink) {
    navigator.clipboard.writeText(playerLink)
      .then(() => {
        // 可选：添加复制成功提示，提升用户体验
        alert('链接已复制');
      })
      .catch(err => {
        console.error('复制失败:', err);
      });
  }
</script>

内容的提问来源于stack exchange，提问作者Alexander Rubino