簡單的JavaScript查找和替換

Question

是否有一種簡單的方法在div中搜索特定字符串並將其替換爲另一個字符串？我不能單獨使用.replaceWith，因爲我需要保留div中的其他元素。我試過各種javascript方法，在這裏找不到任何工具。

因此，像：

$('#foo').find('this string').replaceWith('this other string'); 

爲：

<div id="foo"><div id="child">Other Element</div>this string</div> 

感謝。

Answer 1

試試這個：

var foo = $('#foo').html(); 

foo = foo.replace('this string', 'this other string'); 

$('#foo').html(foo); 

小提琴：http://jsfiddle.net/maniator/w9GzF/

Answer 2

String.replace();怎麼了？

例如

$("#div").html($("#div").html().replace("search string", "replace string")); 

或展開：

var $divElement = $("#div");   //Find the div to perform replace on 
var divContent = $divElement.html(); //Get the div's content 
divContent = divContent.replace("search string", "replace string"); //Perform replace 
$divElement.html(divContent);  //Replace contents of div element. 

Answer 3

這種替換所有出現：

var $foo = $('#foo'), 
    fooHtml = $foo.html(); 

$foo.html(fooHtml.replace(/this string/g, 'this other string')); 

Answer 4

這是我剛纔寫的一個jQuery插件，它爲集合提供了safeReplace。

(function($){ 

$.fn.safeReplace = function (find, replacement) { 

    return this.each(function(index, elem) { 

     var 
      queue = [elem], 
      node, 
      i; 

     while (queue.length) { 

      node = queue.shift(); 

      if (node.nodeType === 1) { 
       i = node.childNodes.length; 
       while (i--) { 
        queue[queue.length] = node.childNodes[i]; 
       } 
      } else if (node.nodeType === 3) { 
       node.nodeValue = node.nodeValue.replace(find, replacement); 
      } 
     } 

    }); 
}; 

})(jQuery); 

這裏是你如何使用它：

$('#foo').safeReplace(/this string/g, 'something else'); 

我在FF 4只測試，並且只對樣本HTML輸入 - 更多的測試建議。

希望這會有所幫助！

Answer 5

此函數可以與您的詞語一樣多次使用，並且不會殺死任何不應該更改的重要內容（存儲在excludes數組中）。

用法：findAndReplace('dog','cat', document.getElementById('content'));

/* js find andreplace Based on http://james.padolsey.com/javascript/find-and-replace-text-with-javascript/ */ 

function findAndReplace(searchText, replacement, searchNode) { 
if (!searchText || typeof replacement === 'undefined') { 
    return; 
} 
var regex = typeof searchText === 'string' ? 
      new RegExp(searchText, 'g') : searchText, 
    childNodes = (searchNode || document.body).childNodes, 
    cnLength = childNodes.length, 
    excludes = ['html','head','style','link','meta','script','object','iframe']; 
while (cnLength--) { 
    var currentNode = childNodes[cnLength]; 
    if (currentNode.nodeType === 1 && 
     excludes.indexOf(currentNode.nodeName.toLowerCase() + ',') === -1) { 
     arguments.callee(searchText, replacement, currentNode); 
    } 
    if (currentNode.nodeType !== 3 || !regex.test(currentNode.data)) { 
     continue; 
    } 
    var parent = currentNode.parentNode, 
     frag = (function(){ 
      var html = currentNode.data.replace(regex, replacement), 
       wrap = document.createElement('div'), 
       frag = document.createDocumentFragment(); 
      wrap.innerHTML = html; 
      while (wrap.firstChild) { 
       frag.appendChild(wrap.firstChild); 
      } 
      return frag; 
     })(); 
    parent.insertBefore(frag, currentNode); 
    parent.removeChild(currentNode); 
} 
} 

Answer 6

剛開始使用HTML（）代替（），與之相匹配的所有結果元素屬性或標記名稱。

我也面臨這個問題，我的解決方案類似於http://james.padolsey.com/javascript/find-and-replace-text-with-javascript/的findAndReplace（）函數，但使用正則表達式獲取所有textNode並在其中搜索每個文本節點。

function epubSearch(query) { 
    var d = document.getElementsByTagName("body")[0]; 
    var re = new RegExp(query, "gi");//pattern for keyword 
    var re0 = new RegExp("[>][^><]*[><]", "gi");//pattern to get textnode 

    d.innerHTML = d.innerHTML.replace(re0, function (text) { 
     // with each textNode, looking for keyword 
     return text.replace(re, "<span class=\"search-result\" style=\"background-color:red;\">$&</span>"); 
    }); 
}