Question

当我要替换三个完全相同的单词时，我无法理解为什么我的代码无效。让我们说如果输入是“www.facebook.com www.facebook.com wwww.facebook.com”

我的输出将是这不是我想要的

<div class="content" style="font-size:13px;">
<a href="www.facebook.com">www.facebook.com</a>
<a href="&lt;a href=" www.facebook.com'=""> www.facebook.com</a>'&gt; www.facebook.com www.facebook.com
</div>

但如果我输入就说“www.facebook.com www.google.com wwww.yahoo.com”我得到了我想要的东西

<div class="content" style="font-size:13px;">
<a href="www.facebook.com">www.facebook.com</a>
<a href=" www.google.com"> www.google.com</a> 
<a href="wwww.yahoo.com">wwww.yahoo.com</a>
</div>

我实际上要做的是当用户在文本区域中输入链接并提交它时。代码将使用锚标记替换匹配链接。

这是我的.js

var wordlink2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
var hyperlink2;

hyperlink2 = content.match(wordlink2);

var $item = $("#ClassroomCommentComment").val();


if (hyperlink2 != null) {
    for (x = 0; x < hyperlink2.length; x++) {
        var site2 = hyperlink2[x].toString();
        var z2 = $item.replace(hyperlink2[x], "<a href='" + site2 + "'>" + site2 + "</a>");
        $item = z2;
    }
}

我已经对此感到震惊。任何人都可以帮助我：（

这是我的功能更加精确：

function checkSubmit()
    {
        var $item = $("#ClassroomCommentComment").val();
        var $cont = $("#FileFile").val();


        if($item == "")
        {
            return false;
        }
        else
        {
            //$("#ClassroomCommentComment").css('color', 'white');

            if (hyperlink != null)
            {
                for (x= 0; x<hyperlink.length; x++)
                {

                    var site = hyperlink[x].toString();
                    var z = $item.replace(hyperlink[x],"<a href='" + site + "'>" + site +"</a>" );
                    $item = z;
                }       
            }

            if (hyperlink2 != null)
            {               
                for (x= 0; x<hyperlink2.length; x++)
                {
                    var site2 = hyperlink2[x].toString();
                    var z2 = $item.replace(hyperlink2[x],"<a href='" + site2 + "'>" + site2 +"</a>" );
                    $item = z2;

                }       
            }



            for (x=0; x<=arraycontroller; x++)
            {
                var n = $item.replace(fullnamewp[x],"<a href = 'http://www.classoncloud.org/" + userlink[x] + "'>" + fullnamewp[x] +"</a>" );
                $item = n;
                //$("#ClassroomCommentComment").val(n);
            }

            if (hash != null)   
            {
                for (x= 0; x<hash.length; x++)
                {
                    var new_item = hash[x].toString().substr(1).split("#");
                    var b = $item.replace(hash[x],"<a href='http://www.classoncloud.org/results/" + new_item + "'>" + hash[x] +"</a>" );
                    $item = b;
                }   
            }

            arraycontroller = 0;
            fullnamewp = [];
            userlink = [];


            var classroom_id = $("#ClassroomCommentClassroomId").val();
            var user_id = $("#ClassroomCommentUserId").val();
            var comment = $item;
            var image = "<?php echo $profile_pic; ?>";
            var name = "<?php echo $current_user_name; ?>";




        $.ajax({
        type: "POST",   
        url: '/learns/classroom/',
        data: "data[ClassroomComment][classroom_id]=" + classroom_id + "&data[ClassroomComment][user_id]=" + user_id + "&data[ClassroomComment][comment]=" + comment,
        dataType: "html",
        success: function(data){



        var parent_id = data;



        $('#comment-list').prepend('<div class="comments">  <a href="'+user_id+'"  class="image"><img src="'+image+'" width="50" height="50">   </a><a href="#" class="wall_delete" id='+parent_id+' style="display: none;"></a>    <div class="name">  <a href="'+user_id+'" class="close">X</a><a href="#" style="font-size:13px;">'+name+'</a><div class="content" style="font-size:13px;">'+comment+'</div> <div class="time"><div class="star-count"></div><a class="my-star" href="#" id='+parent_id+'>myStar .</a><a class="click" href="#">Comment</a> 1 seconds&nbsp;ago </div></div>       <form id="LearnsClassroomForm" accept-charset="utf-8" method="post" action="/learns/classComment"><input type="hidden" name="data[ClassroomComment][parent_id]" action="classroom" value='+parent_id+' id="ClassroomCommentParentId"><input type="hidden" name="data[ClassroomComment][classroom_id]" action="classroom" value="'+classroom_id+'"id="ClassroomCommentClassroomId"><input type="hidden" name="data[ClassroomComment][user_id]" action="classroom" value="'+user_id+'" id="ClassroomCommentUserId"><div class="displaycomment"><textarea name="data[ClassroomComment][comment]" class="textarea" placeholder="Write comment here..." id="ClassroomCommentComment" style="overflow: hidden; word-wrap: break-word; resize: none; height: 18px;"></textarea> <input type="submit" value="Comment" class="submit" style=" margin-right:7px; margin-top:10px;"> </div> </form></div>');

            }
        }); 


        $("#ClassroomCommentComment").val("");
        $("#ClassroomCommentComment").css('color', 'black');

        $($(this).parent().parent().find("textarea")).css("height","30px");     
        return false;   

        }   

    }

Answer 1

我认为你让这比你需要的更复杂。 .replace()方法接受正则表达式来指定应该替换的内容，如果在正则表达式上设置g标志，它会进行全局替换。因此，您可以通过一次调用replace对所有超链接进行适当的更改，如下所示：

var $item = $("#ClassroomCommentComment").val();
$item = $item.replace(/((^|[^\/])(www\.[\S]+(\b|$)))/gi, '<a href="$1">$1</a>');
// do something with $item

演示：http://jsfiddle.net/7vcZd/1/

无需首先使用.match()方法将该匹配的结果用作.replace()的第一个参数。

您的代码产生奇怪输出的原因是您将字符串作为第一个参数传递给.replace() - 当您这样做时它不会进行全局替换，它只是替换第一个实例。因为您在循环中执行了相同的替换，所以第二次和后续替换都在您在第一次替换中添加的<a ...部分内。如果您在循环结束时添加console.log($item)语句，您将会看到每次迭代发生了什么......

Answer 2

替换在以下行中的工作方式是导致问题的原因：

$item.replace(hyperlink2[x],"<a href='" + site2 + "'>" + site2 +"</a>" );

这样做是在$item中搜索hyperlink2[x]的第一个案例，并将其替换为链接。

在www.facebook.com 3次的示例中，它将始终用链接替换www.facebook.com的第一个实例。

要分解错误发生的位置，让我们通过for循环，看看每次content会发生什么。

在进入for循环之前

www.facebook.com www.facebook.com www.facebook.com

首次完成for循环后

<a href='www.facebook.com'>www.facebook.com</a>
www.facebook.com www.facebook.com

for循环的第二次交互

<a href='<a href='www.facebook.com'>www.facebook.com</a>
'>www.facebook.com</a>
www.facebook.com www.facebook.com

这样做是因为它正在寻找并替换www.facebook.com的第一个实例，但原始字符串现在已经改变，而且该实例现在位于href =''。

最好创建一个字符串并返回该字符串，而不是使用replace。

像这样：

<强>的Javascript

var content = "www.facebook.com www.facebook.com www.facebook.com";

var wordlink2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
var hyperlink2 = content.match(wordlink2);

var returnString = "";

if (hyperlink2 !== null) {
    for (x = 0; x < hyperlink2.length; x++) {
        var site2 = hyperlink2[x].toString();
        returnString += "<a href='" + site2 + "'>" + site2 + "</a>\n";
    }
}

$("#ClassroomCommentComment").text(returnString);

示例

http://jsfiddle.net/RDkcc/1/

或者更好的是，nnnnnn的回答看起来最好。

Answer 3

从最初的问题我认为这就是你想要的：http://jsfiddle.net/nb6SQ/6/

var wordlink2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
var items = $(".content a");
var repval = $("#replacetext").val();

items.each(function(i,el) {
    var item = $(el);
 item.attr("href", item.attr("href").replace(wordlink2, repval));
 item.text(item.text().replace(wordlink2, repval));
});

当要替换两个以上相同的单词时，Javascript .replace不使用.match单词

3 个答案: