javascript - 当要替换两个以上相同的单词时，Javascript .replace 不能与 .match 单词一起使用

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;   

        }   

    }

score 4 · Accepted Answer

我认为你让这比你需要的更复杂。该.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)在循环末尾添加一条语句，您将看到每次迭代发生了什么......

score 1 · Accepted Answer

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

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

它的作用是搜索$item第一种情况hyperlink2[x]并将其替换为链接。

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

要分解错误发生的位置，让我们通过 for 循环，看看每次 to 会发生什么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='' 内。

最好创建一个字符串并返回它，而不是使用替换。

像这样：

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 的答案看起来最好。

score 1 · Accepted Answer

从最初的问题我认为这是你想要的：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 - 当要替换两个以上相同的单词时，Javascript .replace 不能与 .match 单词一起使用

3 回答 3

Related

Reference