2010-08-26 227 views
1

我有這樣的代碼:這是一個粗略的例子與編碼不佳,但它說明了什麼我想要做的。]的Javascript更換()和innerHTML的

<html> 
<body> 

<script type="text/javascript"> 

    function fun() 
    { 
     var divs = document.getElementById('hi'); 
     divs.innerHTML = divs.innerHTML.replace("cake","jump"); 
     alert(divs.innerHTML); 
    } 

    </script> 

    <div id="hi"> 
     <span onclick="fun('cake');">Mer<span onclick="fun('cake');">Mer</span></span> 
    </div> 
    <a onclick='fun()';)>Click</a> 
</body> 
</html> 

當我點擊<a>我想將fun()中的onclick參數從'cake'更改爲'jump'。我不想使用setAttribute()方法,因爲我的真實例子有幾個嵌套標籤,我想在幾個不同的地方替換'cake'。

我想要innerHTML.replace()函數來完成這個工作,但是,唉,它不會像我想要的那樣工作。如何替換innerHTML中的文本?

+0

你說它沒有按照你想要的方式運行。它在做什麼? – John 2010-08-26 18:59:58

+0

當點擊「Mer」時會發生什麼? – 2010-08-26 19:06:16

回答

0

更改replace呼叫使用RegEx "global"標誌:

divs.innerHTML = divs.innerHTML.replace(/cake/g,"jump"); 

這就是說,如果你想利用這個時間超過一個快速的測試,你應該使用DOM對象來完成你想要做什麼。否則,這會變得很難看。

而且,它不會傷害更改<a>標記代碼:

<a onclick='fun(); return false;')>Click</a> 

(該return false;是可選的,但好的做法。)

+0

請參閱編輯。我忘了添加第二個嵌套。 – James 2010-08-26 18:55:32

+0

就是這樣,謝謝! – James 2010-08-26 19:00:34

2

首先,你必須在你的HTML的錯誤:

<a onclick='fun()';)>Click</a> 

什麼用;)屬性值之外的?

下一頁...

[...]方法,我的真實的例子有幾個嵌套的標籤,我想在幾個不同的地方,以取代「蛋糕」。

這意味着你真的,真的不想使用innerHTMLreplace()。它擰緊。使用各種HTML解析器;遞歸地走DOM ...除了replace之外的任何東西。

在你的具體例子的範圍內,我建議使用一個變量來代替cakejump的值。

+1

「屬性值以外的內容」)?這顯然是一個閃亮的臉。 – 2010-08-26 23:09:27

3

忘掉它吧。千萬不要破解innerHTML,不能保證它會以任何特定的格式保存,你很可能會通過替換錯誤的東西來搞亂標記,即使它起作用,你也會將文檔內容序列化爲一個字符串,然後重新創建它,然後再次從字符串中重新創建整個內容,而不是僅僅替換您感興趣的特定內容。這很慢並且會丟失所有不可序列化的數據(如表單域值,JS引用和分配的事件處理程序) 。

通常,DOM方法對於更改頁面內容來說更可靠。這是他們設計的。使用它們,並使用DOM級別1 HTML屬性優先於在IE中嚴重損壞的setAttribute。這對事件處理程序屬性來說是兩倍。試圖破解內部的屬性值內部 HTML字符串是瘋狂的,即使它工作。

沒有必要替代任何頁面內容。你可以用一個簡單的變量更輕鬆地實現你的例子:

<div id="hi"> 
    <span>Mer<span>Mer</span></span> 
</div> 
<a id="foo">Click</a> 

<script type="text/javascript"> 
    var potato= 'cake'; 

    document.getElementById('foo').onclick= function() { 
     potato= 'jump'; 
     return false; 
    }; 

    var spans= document.getElementById('hi').getElementsByTagName('span'); 
    for (var i= spans.length; i-->0;) { 

     spans[i].onclick= function() { 
      alert(potato); // do whatever with the variable 
     }; 
    } 
</script> 
0

改變的onclick參數,最簡單的方法是讓一個變量,而不是一個字符串。在這裏我使用了一個叫做food的變量:

<script type="text/javascript"> 

var food = "cake"; 

function change() 
{ 
    food = "jump"; 
} 

</script> 

<div id="hi"> 
    <span onclick="alert(food);">Mer<span onclick="alert(food);">Mer</span></span> 
</div> 
<a onclick='change()'>Click</a>