javascriptで、表示されている文字を変更する。

質問

javascriptで、表示されている文字を変更する。

初歩的な質問になると思いますが、ご教授ください。

javascriptで、例えば、
フォーム内の特定のテキストボックスに、ある値を代入する場合は、
frm1.text1.valur="あああ"; // フォームの名前.テキストボックスの名前.value

また、特定の文字<font id="moji1">あああ</font>を表示／非表示する場合は、
document.getElementById('moji1').style.visibility='visible'; // 又は、'hidden'

と言った感じで、javascriptで、
特定の文字を変更したいのですが、行き詰っております。
例えば、
<font>あああ</font>
を
<font>いいい</font>
に変更。

どなたかご存知の方、ご教授ねがいます。
よろしくお願いします。

回答No.2

mtaka2 · ベストアンサー

<font id="aaa">あああ</font>
といった形でidを振っておけば、innerHTMLを使って
document.getElementById('aaa').innerHTML = 'いいい';
と行った形で内容を書き換えられます。

お礼

ご回答ありがとうございます。

ご指摘の方法（innerHTML）で、うまくいきました。
ありがとうございました。

回答No.5

yyr446

<font></font>ってのはもう使わない方がよいのは、なぜでしょうか。

＝＞個人的な見解ですが、
<font>を使いたい理由はその部分のフォント体とか、大きさとか、太さ、下線とか
で、強調させたいためだと思います。<b>もそうですね。（物理タグと呼ぶそう）

　つまり、文章の意味的（論理的）に強調したいなら<strong>とかを使うべきで、
お飾り的に見栄えだけを変える（物理的）時に使っているという訳です。
物理的に見栄えを変えるときはstyle属性やCSS定義を使って出来ます。
本当に強調したい部分のみ<strong>みたいな論理タグを使うのがSEO的に好ましい
という事だそうな．．．．

　ちなみにHTML4.01以降<font>は非推奨で、HTML5では無くなってます。
※でもブラウザーが解釈出来なくなるかというと、それはまた別問題です。

お礼

分かりやすいご回答、誠にありがとうございます。
ネットで調べてみたら、書いてありました。
全く知りませんでした。
勉強になりました。

回答No.4

yambejp

こんなんでどうですか？

<script>
function changeall(){
var tags=document.getElementsByTagName("*");
for(var i=0;i<tags.length;i++){
var n=tags[i].firstChild;
while(n){
if(n.nodeName=="#text") n.nodeValue=n.nodeValue.replace(/あああ/g,'いいい');
n=n.nextSibling;
}
}
}
function changehoge(){
var tag=document.getElementById("hoge");
var n=tag.firstChild;
while(n){
if(n.nodeName=="#text") n.nodeValue=n.nodeValue.replace(/あああ/g,'いいい');
n=n.nextSibling;
}
}
</script>
<div id="hoge">hoge:あああかかかあああさささ</div>
<table border>
<tr>
<td>fuga:あああかかかあああさささ<td>
</tr>
</table>
<input type="text" value="あああかかかあああさささ" />
<input type="button" value="change all" onclick="changeall()">
<input type="button" value="change hoge" onclick="changehoge()">

※inputのtextは本文ではないので書き変わりません。

お礼

ご回答ありがとうございます。

今回は、innerHTMLを使って、対応させていただきました。
ありがとうございました。

また、ご回答の手法（n.nodeValue.replace）については、
大変勉強になりました。
今後、何かの機会に、活用させていただきたいと思います。
ありがとうございました。

回答No.3

yyr446

<font></font>ってのはもう使わない方がよいです。

<span id="hoge" style='font-size:2em'>あああ</span>

var elment=document.getElementById("hoge");
として、elementの子供のTEXTノードのnodeValueに'いいい'設定するか。

elementの子供をcreateTextNode()で作った'いいい'にreplaceChildするか、

elementをinnerHTMLで直接'いいい'に書き換えるか、

まだあるかなあ．．．．．

お礼

ご回答ありがとうございます。

今回は、innerHTMLを使って、対応させていただきました。
ありがとうございました。

＞<font></font>ってのはもう使わない方がよい
のは、なぜでしょうか。
勉強不足で申し訳ございません。
もしよろしければ、ご教授いただければありがたいのですが。
お手数のようでしたら、かまいません。

回答No.1

qualheart

<font id="moji1">あああ</font>
<font id="moji2" style="visibility:hidden;">いいい</font>

のように「いいい」はあらかじめ非表示にしておいて、

document.getElementById('moji1').style.visibility='hidden'
document.getElementById('moji2').style.visibility='visible'

のように割り当てたアクションのスクリプトでmoji1を非表示、moji2を表示にすればOKです。

ご参考まで。

補足

ご回答ありがとうございます。

visibilityについては、試したのですが、
<font id="moji1">あああ</font>を、hiddenで非表示にしても、
表示場所は確保され、
<font id="moji2">いいい</font>が、
<font id="moji1">あああ</font>と同じ場所に表示されないと思われます。

同じ場所に表示したいのですが、よい方法はないでしょうか。
（<input type="text">を使わずに）

よろしくお願いします。