入力された文字列からリンクタグを生成

質問

お世話になります。

ブラウザから、一行テキストに入力された文字列を使用してリンクタグを生成する挙動を構築していますが、肝心のリンクタグ（ aタグ等 ）が反映されずに悩んでいます。

普段PHPでプログラミングを行っていますので、一旦PHPで変数に置き換えたり、データベースを介したり様々な方法を試みましたが、中々うまくいかずにいます。

-- 【 JavaSの定義箇所 】 -------------

<script type="text/javascript">
<!--

function textcopy(){

var text1 = document.getElementById("text1").value;
document.getElementById("text1").value = "";
text1 = document.getElementById("insert1").innerHTML + text1;
document.getElementById("insert1").innerHTML = "<div>" + text1 + "</div>";

var text2 = document.getElementById("text2").value;
document.getElementById("text2").value = "";
text2 = document.getElementById("insert2").innerHTML + text2;
document.getElementById("insert2").innerHTML = "<div>" + text2 + "</div>";

var text3 = document.getElementById("text3").value;
document.getElementById("text3").value = "";
text3 = document.getElementById("insert3").innerHTML + text3;
document.getElementById("insert3").innerHTML = "<div>" + text3 + "</div>";

var text4 = document.getElementById("text4").value;
document.getElementById("text4").value = "";
text4 = document.getElementById("insert4").innerHTML + text4;
document.getElementById("insert4").innerHTML = "<div>" + text4 + "</div>";

var text5 = document.getElementById("text5").value;
document.getElementById("text5").value = "";
text5 = document.getElementById("insert5").innerHTML + text5;
document.getElementById("insert5").innerHTML = "<div>" + text5 + "</div>";

}

//-->
</script>

-- 【 form部品の箇所 】 --------------

<form>

<input type="text" id="text1" value="<a href='">
<input type="text" id="text2">
<input type="text" id="text3" value="'>">
<input type="text" id="text4">
<input type="text" id="text5" value="</a>">

<br />

<div id="insert1" style="display: inline-block;"></div>
<div id="insert2" style="display: inline-block;"></div>
<div id="insert3" style="display: inline-block;"></div>
<div id="insert4" style="display: inline-block;"></div>
<div id="insert5" style="display: inline-block;"></div>

<button type="button" onclick="textcopy()">submitする</button>

</form>

-------------------------------

例えば、

【 <a href='http://www.hoge.com'>テスト</a> 】の様に返したいのに、

【 http://www.hoge.com'>テスト 】と返ります。

HTMLタグは特殊文字に変換してみましたが、結果は同じでした。
因みにこの挙動がうまくいったら、type属性はhiddenにして隠し要素にするつもりでした。

恐らくこの様な面倒くさい構文より簡単な書き方があるかと思いますが、
今までJavaScript自体殆どタッチしていませんでしたので、調べながら
自分で構築してみました。

ご教示の程、どうぞよろしくお願い申し上げます。

回答No.2

askaaska · ベストアンサー

普通にできると思うわよ
何かできなくて困っているなら
もうちょっとその辺を細かく質問してくれれば
答えられると思うわ

お礼

お礼が遅くなり、大変失礼いたしました。申し訳ありません。

「別ページ（ウィンドウ）に入力した文字列を反映させる」仕様については、急遽他の業務で時間が掛かりそうなので、また改めて質問させていただくことにしましたので、その際はぜひご教示いただければ幸いです。

本当にありがとうございました。
大変助かりました！

回答No.1

askaaska

innerHTMLに値を入れるってことは
その文字列はHTMLとして解釈されるってことよ

たとえば
xxx.innerHTML = "<b>あいうえお</b>";
としたら
あいうえお
が太字で表示されるわけ

今回のケースの場合は
<a href='
を入れているから
実質的には
<div id="insert1" style="display: inline-block;"><a href='</div>
こう書いたのと同じ解釈がされるわ

「それだったら<を&lt;に置き換えたけどうまくいかないんだけど」

といいたいんだろうけど
たぶんあなたはこう書いたはず
<input type="text" id="text1" value="&lt;a href='">

これじゃダメ

そもそも
<input type="text" id="text1" value="<a href='">
は
<input type="text" id="text1" value="&lt;a href='">
こう書かなくてはいけないものを
ブラウザが好意的に
<input type="text" id="text1" value="&lt;a href='">
と書いてあるものとして解釈してくれているだけなのよ

つまり、
あなたの書いたHTML部分では本来は
<input type="text" id="text1" value="&lt;a href='">
こう書かれているはずなの

結論をいうとHTML部分はこう書かなくてはいけないのよ
<input type="text" id="text1" value="&amp;lt;a href='">

もしくは
text1 = text1.replace("<","&lt;");
を入れてあげるとかでもいいわね

お礼

正常に走りました。本当にありがとうございます。

> たぶんあなたはこう書いたはず
<input type="text" id="text1" value="&lt;a href='">

はい、仰る通りです。

&amp;lt;a で正常に反映されました。

それにしても、クライアントサイドのプログラミングは難しいですね。この件だけで１０時間以上悩んでいました・・・。

補足になるのですが、【 今回提示させていただいたソースを応用して 】、別ページ（ウィンドウ）に入力した文字列を反映させることは出来るのでしょうか？

PHPでいうと、例えばvalue属性の値を変数や配列に格納して別ページにpostして受け取り、

echo $data;

という様なことは出来るのでしょうか？

「新しくトピックスを立てなさい」と仰られれば、新規で改めて質問させていただきますが、
もしアドバイスをいただけると幸いです。

何卒、どうぞよろしくお願い申し上げます。