Question

我试图找到并替换＆＃39;从Form元素获取两个值（替换和替换）的函数，然后替换所有被替换的＆＃39;在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);

在JavaScript中简单替换用户输入

2 个答案: