如何将提取的href转换为超链接

Question

我正在一个类似于 Facebook 的网站上开发标签部分。这个想法是，每当有人在帖子区域中键入 @ 时，就会出现一个包含他所有朋友的下拉菜单。然后，他选择要标记的人并单击该人的个人资料。我有一个javascript函数，它检测何时按下@，然后调用另一个js函数，然后将ajax请求发送到列表的php文件。这部分效果很好。

所以当用户从他们的朋友列表中点击某人时，我进行了设置，以便从 php 文件中提取包含朋友用户名的 href 部分作为纯文本，然后在 @ 字符之后显示为文本字符串在帖子区域（点击return: false 后，我阻止了关注个人资料）。因此，例如，当有人想选择 John Smith 时，他按 @，出现列表，他选择 John Smith，点击他的个人资料，列表消失，然后 @ 后面出现用户名，如下所示：@john_smith

现在的问题是，我想在@ 之后将 john_smith 变成一个超链接，该超链接将指向 John Smith 的个人资料，而不是纯文本。我一直在努力寻找解决方案。任何帮助将不胜感激。

非常感谢！ :)

**//php ajax file**

    <?php

    $userLoggedIn = $_POST['userLoggedIn'];

    $userLoggedIn = new User($con, $userLoggedIn);

    $rez = array();
    $rez = $userLoggedIn->getFriendArray();


    if ($rez != ",") {

    $no_commas = explode(",", $rez);

    foreach ($no_commas as $key => $value) {

        $friend = mysqli_query($con, "SELECT first_name, last_name, username, profile_pic FROM users WHERE username='$value'");

        $row = mysqli_fetch_assoc($friend);

         echo "<div class='displayTag'>

                        <a href=" . $row['username'] . " id='grabLink'>         

                            <div>
                                <img src='" . $row['profile_pic'] . "'>
                            </div>  

                            <div>

                                " . $row['first_name'] . " " . $row['last_name'] . "
                                <p style='margin: 0;'></p>
                                <p id='grey'></p>

                            </div>

                            </a>    

                    </div>";


    }


    }

    else {

    echo "<br><p id='ynf'>You have no friends. Please add someone</p>";
    }   

**//js functions**

         function userTag(user) {  // for ajax

         $.post("includes/handlers/ajax_user_tag.php", {userLoggedIn:user}, 
         function(data){

         $('.tag_results').html(data);

         });
         }

        function textTag() { // for extracting href and placing @ and username anywhere in the post area

            $('.displayTag a').click(function(a){

            var x = $(this).attr('href');
            var y = $(this).prop('href');

            var $txt = jQuery("#post_text");
            var caretPos = $txt[0].selectionStart;
            var textAreaTxt = $txt.val();

            $txt.val(textAreaTxt.substring(0, caretPos) + x + textAreaTxt.substring(caretPos) );

            $('.tag_results').html("");

            return false;
          });

          }

    **//js code**

    $("#post_text").keydown(function (e) {  // listens for @
        if(e.which == 50)
          userTag('<?php echo $userLoggedIn; ?>');
        if(e.which != 50)
          $('.tag_results').html("");
      });

      $('.tag_results').hover(function(e) { //calls textTag function on hover
          textTag();
      });

  **//Empty div populated by ajax results**

     <div class="tag_results"> 

     </div>

编辑： 我发现问题出在哪里，纯属偶然。在包含 php 类的文件中，strip_tags 用于所有帖子。所以我想要做的几乎是不可能的。现在它可以正常工作了。感谢大家的帮助！ :)

Answer 1

我不相信您的点击事件正在捕获点击，因为您的 php 正在动态创建列表元素。还有你的函数，textTag() 在该函数运行之前实际上并没有应用事件，所以它可能会产生问题。将您的 JS 更改为 -

$(document).on('click', '.displayTag a', function() {
    var href = $(this).attr('href');
    //other code applying href to new anchor tag in proper format
});

Answer 2

首先，我会稍微更改一下 PHP 响应，以便更容易获得对方的全名。

**//php ajax file**

    <?php

    $userLoggedIn = $_POST['userLoggedIn'];

    $userLoggedIn = new User($con, $userLoggedIn);

    $rez = array();
    $rez = $userLoggedIn->getFriendArray();


    if ($rez != ",") {

    $no_commas = explode(",", $rez);

    foreach ($no_commas as $key => $value) {

        $friend = mysqli_query($con, "SELECT first_name, last_name, username, profile_pic FROM users WHERE username='$value'");

        $row = mysqli_fetch_assoc($friend);

         echo "<div class='displayTag'>

                        <a href=" . $row['username'] . " id='grabLink'>         

                            <div>
                                <img src='" . $row['profile_pic'] . "'>
                            </div>  

                            <div class='fullname'>

                                " . $row['first_name'] . " " . $row['last_name'] . "
                                <p style='margin: 0;'></p>
                                <p id='grey'></p>

                            </div>

                            </a>    

                    </div>";


    }


    }

    else {

    echo "<br><p id='ynf'>You have no friends. Please add someone</p>";
    }   

那我就修改一下JS函数

function textTag() { // for extracting href and placing @ and username anywhere in the post area

            $('.displayTag a').click(function(a){

            var fullname = $(this).find('.fullname').text();
            var x = '<a href="' + $(this).attr('href') + '">'+fullname +'</a>';
            var y = $(this).prop('href');

            var $txt = jQuery("#post_text");
            var caretPos = $txt[0].selectionStart;
            var textAreaTxt = $txt.val();

            $txt.html(textAreaTxt.substring(0, caretPos) + x + textAreaTxt.substring(caretPos) );

            $('.tag_results').html("");

            return false;
          });

          }