javascript - 在 JavaScript 中简单替换为用户输入

Question

我正在尝试创建一个“查找和替换”函数，该函数从 Form 获取两个值(替换和替换)元素，然后替换 DIV 内所有出现的“replaced”。之后，我希望它显示一个带有替换字数统计的警报。 试图通过 for 到达那里循环，但出了点问题。使用纯 JS，我对于 jQuery 来说太新手了。

function wordReplace()
{
    var replaced = document.getElementById('replaced').value.toLowerCase;
    var replacement = document.getElementById('replacement').value;
    var workArea = document.getElementById('main').innerHTML;
    for (var r=0; r<workArea.lenght; r++)
    {
        if (workArea[r].value.toLowerCase == 'replaced')
        {
            workArea[r].value.replace('\breplaced', 'replacement')
            alert(workArea[r].value.replace('replaced', 'replacement').length)
        }
    }
}

这是我的表单代码，以防万一:(忽略 <input type="submit" onclick="replacerHide();"/> - 它用于不同的功能，目前可以使用)

<form> 
   <label for="replaced" class="labelInline">Słowo szukane</label>
   <input type="text" name="replaced" id="replaced"/>
   <label for="replacement" class="labelInline">Zamiennik</label>
   <input type="text" name="replacement" id="replacement"/>             
   <input type="submit" onclick="replacerHide();"/>         
</form>      

我在这里读到(在我的一个类似问题中)我应该熟悉 regex我做到了。但不知道如何应用它来解决我的问题。我很确定我正在做一些事情 for在这里循环，但除此之外我是空的:/

我们将非常感谢所有和任何帮助。

编辑 - 更正的完整工作代码

function wordReplace()
    {
        var div = document.getElementById('main');
        var find = document.getElementById('replaced').value;
        var replace = document.getElementById('replacement').value;

        var re_Find = new RegExp(find, 'gi');
        var matches = div.innerHTML.match(new RegExp(find, 'gi'));

        if (matches) 
            {
                div.innerHTML = div.innerHTML.replace(re_Find, replace);
            }

            matches = matches ? matches.length : 0;
            alert(matches);
     }

以及Form

<div id="form">
        <form id="formularz"> 
            <label for="replaced" class="labelInline">Słowo szukane</label>
            <input type="text" name="replaced" id="replaced"/>
            <label for="replacement" class="labelInline">Zamiennik</label>
            <input type="text" name="replacement" id="replacement"/>                
            <button onclick="replacerHide(); wordReplace();">Podmień!</button>  
        </form>

现在它可以正常工作了:)

Answer 1

尝试一些正则表达式。

function replace(find, replace, haystack) { 
    return haystack.replace(new RegExp(find,"gmi"),replace);
    }
function count(find, haystack) { 
        return haystack.match(new RegExp(find,"gmi")).length;
    }
window.alert(replace ("hello","bye","hello world? Hello person! and hello universe!"));
window.alert("Number of matches: "+count("hello","hello world? Hello person! and hello  universe!"));