1

css('background-image') パスを置き換えたい。

問題：

同じ変数に対してoldBgImg = this.element.css('background-image')

FireFox が復活 -

"url("http://mySite/images/file1.png")"

しかしChromeは引用符なしでそれを返します:

"url(http://mySite/images/file1.png)"

これが私が使用するソリューションです。もっと簡単にするのを手伝ってもらえますか？ 

var oldBgImg = this.element.css('background-image');    
// => FF:   "url("http://mySite/images/file1.png")"
// Chrome:  "url(http://mySite/images/file1.png)"
//   According to http://www.w3.org/TR/CSS2/syndata.html#value-def-uri :
//   quotes are optional, so Chrome does not use them, but FF does . . .

var n1 = oldBgImg.lastIndexOf("(");  n1 += 1;  // now points to the char after the "("
var n2 = oldBgImg.lastIndexOf(")");  n2 -= 1;  // now points to the char before the ")"
var c1 = oldBgImg.substring(n1, n1 + 1);       // test the first Char after the "("
var c2 = oldBgImg.substring(n2, n2 + 1);       // test the first Char after the "("
if ( (c1 == "\"") || (c1 == "\'") ) { n1 += 1; }
if ( (c2 == "\"") || (c2 == "\'") ) { n2 -= 1; }
var oldBgImgPath = oldBgImg.substring(n1, n2 + 1);       // [ (" ] .. [ ") ]
var n = oldBgImgPath.lastIndexOf("/");
var newBgImgPath = oldBgImgPath.substring(0, n + 1) + "file2.gif";

// if needed, should also add : 
//    var path = encodeURI(newBgImgPath);
this.element.css('background-image', 'url(' + newBgImgPath + ')');

ノート：

  1. http://www.w3.org/TR/CSS2/syndata.html#value-def-uriによると、 一重引用符または二重引用符を使用するか、引用符なしで使用できます

  2. 相対パス (「http」なしまたは「ファイル」あり) の一般的な解決策を探しています。URL 内の fileName を置き換えたいだけです。

4

3 に答える 3

1

正規表現でそれを行う方法の例を次に示します。-ライブデモ

表現：

("?)(http:.*?)\1\)

試合

url = 'url("http://mySite/images/file1.png")'.match(/("?)(http:.*?)\1\)/)[2];

その後、プロパティを再構築できます。

$(this).css( 'background-image', 'url("' + url + "')" );

これはすべてのブラウザで機能するはずです。

于 2013-07-28T11:30:21.450 に答える
1

正規表現でやりました。私はこのコードを使用します：

var re = /url\(['"]?(.+?)[^\/]+['"]?\)/;
var regs = re.exec(oldBgImg);
var newBgImgPath = regs[1] + "file2.png";

JSFiddle

REについて説明します。

  1. で始まります/。これは RE であることを示します。
  2. 次にありurl\(ます。テキストと一致しますurl(。(は予約文字であるためエスケープされます。
  3. 次にあります['"]?。orに['"]一致し、theはオプションにします。'"?
  4. A(は、参照可能な RE グループを開始します。
  5. In.+? .は、改行を除くすべての文字に一致します。A+は、少なくとも 1 つ、またはそれ以上存在する必要があることを示します。最後に、 a?は+非貪欲にするため、可能な限り少ない文字に一致しますが、RE 全体に一致しようとします。
  6. A)がグループを終了します。
  7. [^\/]非/文字に一致します。それから+もう一度あります。 末尾からできるだけ多くの非文字 (ファイル名)?に一致させたいため、後にはありません。/
  8. 最後に、もう 1 つのオプションの引用符で)ある閉じ括弧 in のエスケープされたaと、RE を終了するurl(...)aがあります。/

re.exec(oldBgImg)最初の要素が一致した文字列全体であり、次の要素が一致した RE グループ (()括弧で作成)である配列を返すようになりました。次にregs[1]、最初に一致したグループであり、パス名を含む を取得できます。

于 2013-07-28T11:43:32.697 に答える
0

の引用符をこのようなものに置き換えることができますoldBgImg。

oldBgImg = oldBgImg.replace(/\"/g, "");

そうすれば、どのブラウザーが取得しても、URL は常に同じになります。

于 2013-07-28T11:42:46.027 に答える