ID登録せずに、無料で質問できる♪ 教えて!gooアプリ>>

jqueryを使った文字の置換を行いたいのですがうまくいきません。
どなたかお詳しい方、ご教授いただけますでしょうか。
よろしくお願いします。
■行いたいこと
<div class="bbb"><img src="0123.jpg"></div>
をwindow読み込み時に
<div class="bbb"><img src="0123s.jpg"></div>
と置き換えしたい。

javascriptのソースは以下の通りです。
<script src="jquery-min.js"></script>
<script type="text/javascript">
<!--
$(function(){
var aaa = $('.bbb');
aaa.html().replace(/.jpg/ig, "s.jpg");
});
// -->
</script>

このQ&Aに関連する最新のQ&A

A 回答 (2件)

これでどうでしょう?



$(function(){
$('.bbb > img').each(function(){
var newurl = $(this).attr('src').replace(/\.jpg/ig, 's.jpg');
$(this).attr('src', newurl);
});
})
    • good
    • 0
この回答へのお礼

ありがとうございます!
考えていたことが出来ました。
とても助かりました<(_)>。

お礼日時:2009/05/14 23:29

質問のコードでは文字列を置き換えているだけです。



・置き換えた文字列を代入してやる必要があります
aaa.html(aaa.html().replace(/.jpg/ig, "s.jpg"));

※正規表現についてですが、、、
文字列.はメタキャラなので今回のような使い方は避けたほうがいいです。
⇒ /\.jpg/

この回答への補足

ご回答いただきありがとうございます。
正規表現のご指摘も参考になりました。
試してみたところ、変換はできたのですが、
以下の状況になってしまいました。
<div class="bbb"><img src="0123.jpg"></div>
<div class="bbb"><img src="4567.jpg"></div>
とあったとしたら、
<div class="bbb"><img src="0123s.jpg"></div>
<div class="bbb"><img src="4567s.jpg"></div>
としたいのですが、
<div class="bbb"><img src="0123s.jpg"></div>
<div class="bbb"><img src="0123s.jpg"></div>
となってしまいます。解消方法はあるでしょうか?

補足日時:2009/05/12 23:29
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

Qjavascriptを使ったページ内の特定文字の置き換え

ブラウザーにページを表示させたときに一部の特定の文字だけを違った文字に置き換えたいと思っています。

ページ全体の該当文字ならば、
<script type="text/javascript">
<!--
document.body.innerHTML=document.body.innerHTML.replace(/置換前/g,'置換後');focus();
// -->
</script>
でページ全体の文字が置換できるのですが、下のケースのように一部の場所(DIV内)の場合はどのようにすればよろしいのでしょうか。

<html>


<div class="sample">
<a href="hogehoge">置換前</a>
</div>


</html>

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

Aベストアンサー

ターゲットが<div>に限られるなら・・・

var allTags = document.getElementsByTagName('div');
for (var i=0;i<allTags.length;i++){
if(allTags[i].className=="sample"){
allTags[i].innerHTML=allTags[i].innerHTML.replace(/置換前/g,'置換後');
}
}

でいいんじゃ、じゃないかしらん??

div に idプロパティが付いていれば、

document.getElementById('xxx').innerHTML.replace(/置換前/g,'置換後');

で、一発だけど・・・。

QjQueryを使ってある画像を別の画像に置き換えたい。

jQueryを使ってある画像を別の画像に置き換えたい。

jQueryを使って、<body class="info">の時にだけ
<ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に
置き換えるということをしたいです。

<body class="info">
<ul id="global-nav">
<li><img src="info.gif" /></li>
<li><img src="about.gif" /></li>
</ul>
</body>

↓↓↓

<body class="info">
<ul id="global-nav">
<li><img src="info_on.gif" /></li>
<li><img src="about.gif" /></li>
</ul>
</body>


どのように記述をしてやるとうまくいきますでしょうか。
色々試しているのですがうまくいきません。

よろしくお願いします。

Aベストアンサー

bodyのクラスは動的に変わるのでしょうか? それともonload時にチェックすればよいだけ?

とりあえず、ロード時に設定すればよいだけなら、jquery使うまでもなさそうな気がしますが、jqueryというご質問なので…

><ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に
という言葉通りに書くなら、
$(function() {
if ($("body").hasClass("info")) {
$("#global-nav img[src$='info.gif']").each(function() {
$(this).attr("src", "info_on.gif");
});
}
});

みたいな感じでしょうか?

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qjavascript src書き換え

javascript 初心者なのですが、質問させてください。

クリックした画像を3.jpgに書き換えるというコードを書いたのですが、うまく動きません。
どこが違間違っているのでしょうか。

/-------------------------------------------------------------/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>神経衰弱</title>
<style type="text/css">

ul {
width: 300px;
list-style:none;
margin: 0;
padding: 0;
}

li {
float:left;
margin: 0;
padding; 0:
}

img {
vertical-align: bottom;
}

#all {
width: 300px;
margin: 0px auto 0px;
margin-top: 50px;
}

</style>
</head>
<body>

<div id="all">
<ul>
<li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_1" onclick="conce(c_1)" /></li>
<li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_2" onclick="conce(c_2)" /></li>
<li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_3" onclick="conce(c_3)" /></li>
<li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_4" onclick="conce(c_4)" /></li>
<li><img src="none_2.jpg" alt="" width="100px" height="100px" id="c_5"/></li>
<li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_6" onclick="conce(c_5)" /></li>
<li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_7" onclick="conce(c_6)" /></li>
<li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_8" onclick="conce(c_7)" /></li>
<li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_9" onclick="conce(c_8)" /></li>
</ul>
</div>

<script type="text/javascript">

function conce(aaa){
document.getElementById("aaa").src = "3.jpg";
}



</script>
</body>
</html>
/-----------------------------------------------------------------------/

よろしくお願いします。

javascript 初心者なのですが、質問させてください。

クリックした画像を3.jpgに書き換えるというコードを書いたのですが、うまく動きません。
どこが違間違っているのでしょうか。

/-------------------------------------------------------------/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...続きを読む

Aベストアンサー

引用符が付け間違えしています

誤: <img src="none.jpg" id="c_1" onclick="conce(c_1)" />
正: <img src="none.jpg" id="c_1" onclick="conce('c_1')" />

誤: document.getElementById("aaa").src = "3.jpg";
正: document.getElementById(aaa).src = "3.jpg";

本質ではありませんが、一緒にこれも直しましょう

誤: <img width="100px" height="100px"
正: <img width="100" height="100"

QJavaScriptで文字列の特定文字以降を取得する方法

変数 url に以下のような文字列が代入されています。
var url='http://www.example.com?id=2&page=3';

ここから?以降の文字列だけを取得したいのですが、どのようにすれば良いのでしょうか?
「id=2&page=3」←このような結果が欲しいです。

ブラウザのurlから直接?以降を取得するには location.search を使えば良いというのは調べてわかりましたが、変数に文字列としてurlが代入された場合の方法がわかりません。

ご回答よろしくお願いいたします。

Aベストアンサー

文字列から抽出するのであれば、indexOfを使うか正規表現かでしょうね
深く考えなければ前者、複雑なデータを取りたいなら後者でしょうか

<script>
var url='http://www.example.com?id=2&page=3';
if(url.indexOf("?")>=0){
var str1=url.substring(url.indexOf("?")+1,url.length);
}
document.write(str1+"<br>");

var reg=new RegExp("\\?(.+?)$");
if(url.match(reg)){
var str2=url.match(reg)[1];
}
document.write(str2);
</script>

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qページ内文字列の置換について

BODY内の全要素を参照して、特定文字列を置換するスクリプトを教えてください。
具体的に言うと、ブログなどで既に投稿済みの各記事などに必ずと言っていいほど入力している「■」を「◇」に替えたいのです。
いろいろ検索してみましたが、replace()かな?
と言う程度は探れても、そこから先に進めない知識しかございません。
どうぞよろしくお願い申し上げます。

Aベストアンサー

こんな感じです。これでお望みの動きをすると思います。

<html>
<script langage="javaScript">
function func(){
document.body.innerHTML = document.body.innerHTML.split('■').join('◇');
}
</script>
<body onLoad="func()">
■■■■■◇◇◇◇◇<br>
</body>
</html>

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング