Question

我正在尝试弄清楚如何使用字符串上的正则表达式<div>语句的结果替换.match()的内容。这是我到目前为止的代码，但我无法让它工作。我希望按钮保持在屏幕上，但<div>反映匹配的单词。

<html>
<body>
    <script type="text/javascript">
    function search(){
        var str = "Visit W3Schools";
        var patt1 = /w3schools/i;
        document.write(str.replace(document.getElementById("results"),
                                   (str.match(patt1))));
    }
    </script>
</body>

<div id="results">So this is some text.</div>
<button name="Search" onclick="search()">Click Here</button>
</html>

关于它为什么不起作用的任何想法？

Answer 1

您需要停止按钮完成默认事件，即提交页面。（编辑：不，不，它的默认事件是什么 - 假设它是<submit> :)）

另外，要从文档id属性获取文档的div，使用document.getElementById('id-of-element')并设置div的内容，在元素上使用.innerHTML刚拿到。

// We need to take the event handler as a parameter for the function, let's call it e
function search(e){
    var str = "Visit W3Schools";
    var patt1 = /w3schools/i;
    document.getElementById("results").innerHTML = str.match(patt1)[0];
    // This line stops the default action occurring
    e.preventDefault();
}

注意：我们不需要在这里指定参数，e自动进入

<button name="Search" onclick="search()">Click Here</button>

Answer 2

document.write将使用传入的参数替换整个页面。所以你只想更新那个单一的DIV，results。所以你想使用innerHTML：

function search() {
    var str = "Visit W3Schools";
    var patt1 = /w3schools/i;
    document.getElementById("results").innerHTML = str.match(patt1)[0];
}

Answer 3

您的代码正在字符串"So this is come text."中搜索字符串"Visit W3Schools"，并将其替换为数组["W3Schools"]，然后将其写入屏幕。这没有多大意义。

尝试这样的事情：

function search(){
    var str = "Visit W3Schools";
    var patt1=/w3schools/i;
    document.getElementById("results").innerHTML=(str.match(patt1))[0];
}

用正则表达式的字符串匹配替换div的内容

3 个答案: