简单的javascript查找和替换

时间:2011-05-12 19:53:47

标签: javascript jquery replace

是否有一种简单的方法可以在div中搜索特定字符串并将其替换为另一个字符串?我不能单独使用.replaceWith,因为我需要保留div中的其他元素。我试过这里找到的各种javascript方法都无济于事。

类似于:

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

有:

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

感谢。

6 个答案:

答案 0 :(得分:9)

这取代了所有出现次数:

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

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

答案 1 :(得分:7)

试试这个:

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

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

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

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

答案 2 :(得分:3)

只需使用html()。replace()匹配所有结果元素属性或标记名称。

我也面临这个问题,我的解决方案类似于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>");
    });
}

答案 3 :(得分:2)

这是我刚写的一个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输入上进行了测试 - 建议进行更多测试。

希望这有帮助!

答案 4 :(得分:1)

String.replace();出了什么问题?

e.g。

$("#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.

答案 5 :(得分:0)

这一项与您的术语出现的次数相同,并且不会杀死任何不应更改的重要事物(存储在排除数组中)。

用法: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);
}
}