Найти и заменить слово в Div, используя хороший Ole JavaScript

Question

Я знаю, что это довольно легко сделать в jQuery, но я пытаюсь сделать это в 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);

Не уверен, что я делаю не так? Есть мысли?

Спасибо

Answer 1

В настоящее время вы делаете это подверженным ошибкам способом.

Ошибка подвержена, потому что вы потеряете обработчики событий, а также замените вещи, которые вы не можете заменить. Что если поисковый термин был 'a'? Хотели бы вы, чтобы все элементы a превратились в строку замены?

Кроме того, вы без необходимости сериализуете HTML-код из DOM, который необходимо повторно проанализировать при повторной установке.

Правильный способ сделать это - перебирать только текстовые узлы.

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 .

Answer 2

Проблема здесь:

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

На самом деле он ищет oldText, а не "Mobile"

Как сказал КБ, вы можете решить это следующим образом:

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

Answer 3

Чтобы дать ответ, который не использует eval (повторяйте за мной: не используйте eval!), Попробуйте следующую строку:

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

Где ранее вы имели/pattern/flags, теперь у вас есть new RegExp(pattern, flags)

Answer 4

Просто установите

var oldText = /Mobile/g