javascript - 用另一个替换匹配的字符串

Question

我正在尝试创建一个搜索框，以在 p、span 等 html 标签中查找搜索模式，就像浏览器的 ctrl+f 选项一样。

Javascript:

function searchKeyword(){
        var keyword = document.searchform.searchbox.value;
        $("#paragraph").each(function() {
            var string = $(this).text();
            newstring = string.replace(keyword, '<span style="background-color: #faf701;">'+keyword+'</span>');
            $(this).text(newstring);
        });
    }

唯一的问题是，它不会将字符串读取为 html 标记，而是作为一个简单的字符串并准确输出:

<span style="background-color: #faf701;">'+keyword+'</span>

而不是突出显示的字符串。

Answer 1

因为您正在使用 .text() , 因为你想呈现 html 内容使用 .html()

$(this).html(newstring);

---

既然你有id选择器，就没有必要使用.each()

function searchKeyword() {
    var keyword = document.searchform.searchbox.value;

    $("#paragraph").html(function (i, html) {
        return $(this).text().replace(keyword, '<span style="background-color: #faf701;">' + keyword + '</span>');
    })
}

---

使用正则表达式替换多个匹配项

function searchKeyword() {
    var keyword = document.searchform.searchbox.value;
    var regex = new RegExp(RegExp.escape(keyword), 'g')

    $("#paragraph").html(function (i, html) {
        return $(this).text().replace(regex, '<span style="background-color: #faf701;">' + keyword + '</span>');
    })
}


if (!RegExp.escape) {
    RegExp.escape = function (value) {
        return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
    };
}