使用Good Ole在Div內查找和替換單詞JavaScript

我知道這在jQuery中很容易實現，但我正在嘗試使用JavaScript。使用Good Ole在Div內查找和替換單詞JavaScript

我有這樣的：

window.addEventListener('load', function() { 

     function replaceName() { 
     var oldText= "Mobile"; 
     var newText = "Stackoverflow"; 
     var oldString= document.getElementById('replace').innerHTML; 
     var newString = oldString.replace(/oldText/g, newText); 
     document.getElementById('replace').innerHTML = newString; 
     } 

     replaceName(); 

}, false);

不知道我做錯了嗎？有什麼想法嗎？

感謝

來源

2011-05-30 Yahreen

的問題是在這裏：

var newString = oldString.replace(/oldText/g, newText);

它實際上是尋找oldText，而不是"Mobile"

正如KB說，你可以解決這個問題：

var newString = oldString.replace(new RegExp(oldText, "g"), newText);

來源

2011-05-30 23:32:56 Halcyon

熱潮！非常感謝。驅使我堅果。得到它的工作。 – Yahreen 2011-05-30 23:34:02

在定義正則表達式'var reg = new RegExp（oldText，「g」）;'然後使用'oldString.replace（reg，newText）;'for'時，應該可以使用完整語法而不是簡單形式例。 – 2011-05-30 23:41:26

我不會在絕對必要的情況下推薦'eval'。即使你認爲它*是絕對必要的，你可能是錯的。 – Stoive 2011-05-30 23:44:36

目前，你正在這樣做錯誤容易出現的方式。

容易出錯，因爲您將失去事件處理程序以及替換您可能不想替換的內容。如果搜索項是'a'，該怎麼辦？你想要所有a元素變成什麼替換字符串？

另外，當您重新設置時，您不必要地將需要重新設置的DOM的HTML序列化。

正確的做法是隻遍歷文本節點。

var replaceText = function replaceText(element, search, replace) { 
    var nodes = element.childNodes; 

    for (var i = 0, length = nodes.length; i < length; i++) { 

     var node = nodes[i]; 

     if (node.childNodes.length) { 
      replaceText(node, search, replace); 
      continue; 
     } 

     if (node.nodeType != 3) { 
      continue; 
     } 

     node.data = node.data.replace(new RegExp(search, 'g'), replace); 
    } 

}

jsFiddle。

來源

2011-05-30 23:41:12 alex

小心添加基準？我實際上願意賭（比喻），這個方法與innerHTML並沒有你期望的那麼糟糕（根據瀏覽器/版本而不同）。首先，因爲你只有2個對DOM的調用。迭代textNodes可能會很麻煩。 – Halcyon 2011-05-30 23:51:34

@Frits即使它比使用「innerHTML」慢，您也可以獲得不會損壞HTML或丟失與屬性綁定的事件處理程序的好處。 – alex 2011-05-31 00:01:06

當然，+1代碼示例 – Halcyon 2011-05-31 00:23:00

只需設置

var oldText = /Mobile/g

來源

2011-05-30 23:41:25

這不起作用：P - 它不再是一個正則表達式，而是一個正常的字符串。這就是我最初使用eval的原因。 – Halcyon 2011-05-30 23:50:05

@Frits，謝謝，忘了把引號關掉，因爲它是一個正則表達式對象。新的RegExp（）方式雖然更好。 – 2011-05-30 23:56:43

好的，整個想法當然是'oldText'各不相同，並不總是'Mobile'。 – Halcyon 2011-05-30 23:57:42

爲了提供不使用eval答案的緣故（跟着我重複：請不要使用eval！），請嘗試這一行：

var newString = oldString.replace(new RegExp(oldText, "g"), newText);

在此之前你有/pattern/flags，現在你有new RegExp(pattern, flags)

來源

2011-05-30 23:41:53 Stoive

使用Good Ole在Div內查找和替換單詞JavaScript

回答

相關問題