用 JavaScript 中的用户输入简单替换

Question

我正在尝试创建一个“查找和替换”函数，该函数从 Form 元素中获取两个值（替换和替换），然后替换 DIV 中所有出现的“替换”。之后，我希望它显示带有替换字数的警报。 试图通过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!"));

Answer 2

Regular expressions 和replace 是你这样的朋友

通过将选项gi 指定给RegExp 构造函数，您可以消除检查字符大小写的需要（i 表示不区分大小写）。 g 表示“全局”，并告诉正则表达式您要对找到的每个 find 实例重复替换（默认情况下，它将替换第一个然后停止）。

// Grab all of the necessary data
var div = document.getElementById('main');
var find = document.getElementById('replaced').value;
var replace = document.getElementById('replacement').value;

// Create our regular expression
var re_Find = new RegExp(find, 'gi');

// Get everything from the div's innerHTML that matches our regular expression
// (this will result in an array of strings, all of which are exactly
// the same as "find")
var matches = div.innerHTML.match(re_Find);

// If there were any matches, use the same regular expression to
// perform the actual replace and update the div
if (matches) {
  div.innerHTML = div.innerHTML.replace(re_Find, replace);
}

// Grab the count of matches that were found and alert the user
matches = matches ? matches.length : 0;
alert(matches);