JavaScriptでアンカータグが上手く結合出来ない

正規表現でhttp://～等の入力があった場合自動でアンカー表記し、Link表示するようにJavaScriptを組んでおります。

function autoLink(message) {
return message
.replace(
/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g,
'<a href="javascript:void(0);" onclick="window.open(\"$1\", \"\", \"\")" target="_blank">$1</a>');
}

この結果は以下のように置換されて正常に返ってきているように見えます。
【入力】
りんく：http://www.google.com
【出力】
りんく：<a href="javascript:void(0);" onclick="window.open("http://www.google.com", "", "")" target="_blank">http://www.google.com</a>

実際はこの置換処理の後に以下のようにdiv要素に+で文字列連結しております。
msgが上記で置換したアンカータグが入るようになっています。

var messageElement = $('<div class="sendbox">' + msg + '<span class="msgToolTip">' + sendDate + '</span></div>');

このやり方でやると何故かアンカータグの中身が書き変わってしまっており、デバッガでみたところhttp://が以下のようにhttp:=""のようになったり崩れてしまっています。

<a href="javascript:void(0);" onclick="window.open(\" http:="" www.yahoo.co.jp\",="" \"\",="" \"\")"="" target="_blank">http://www.yahoo.co.jp</a>

jQueryで要素を生成しているやり方が悪いのかと思い以下のように要素生成後にhtmlでアンカーを追加しましたが駄目でした。

var messageElement = $('<div class="sendbox"></div>');
messageElement.html(msg);

解決方法等もし分かる方がいらっしゃたらご教授頂ければ幸いです。

よろしくお願いいたします。

No.3 ベストアンサー 回答者： fujillin 回答日時： 2015/10/02 17:04

ざっと拝見しただけですが・・・

例えば、ご提示のautoLink関数に、引数として文字列
　なんてったってhttp://www.google.comだよね
を送った場合、返される文字列は以下のようになりますよね？

　なんてったって<a href="javascript:void(0);" onclick="window.open("http://www.google.com", "", "")" target="_blank">http://www.google.com</a>だよね

これって、window.openのダブルクォーテーションの中でダブルクォーテーションを使っている形となってしまっているので、ブラウザに正しく解釈されないものと推測します。
autoLinkが返す値をエスケープした文字列となるようにするか、あるいはシングルクォーテーションの形にしておけばよろしいのではないでしょうか？

例えば
return message
.replace(
/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g,
'<a href="javascript:void(0);" onclick="window.open(\'$1\', \'\', \'\')" target="_blank">$1</a>');
とか。

No.2 回答者： DoubtOwl 回答日時： 2015/10/02 16:26

Replace後の表記が間違っているせいかもしれません。

　onclick="window.open("http://www.google.com", "", "")"
　→二重のダブルクォーテーション

message.replace(
/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g,
'<a href="javascript:void(0);" onclick="window.open(\"$1\", \"\", \"\")" target="_blank">$1</a>');
}

↓

message..replace(
/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g,
'<a href="javascript:void(0);" onclick="window.open(\'$1\', \'\', \'\')" target="_blank">$1</a>');

ではどうでしょう

この回答へのお礼

ありがとうございます！シングルクォーテーションにしたところ動作しました！

お礼日時：2015/10/05 11:54

No.1 回答者： yambejp 回答日時： 2015/10/02 16:18

DOMで処理してみては？