javascript - 如何在 JavaScript 中多次更改 div 的样式

Question

我有一个包含以下内容的 div，例如:

<div id="x">Lorem ipsum dolor sit amet.</div>

我希望能够动态地通过 JavaScript 将 ipsum 加粗，然后是 amet，例如，新文本如下所示:

Lorem **ipsum** dolor sit **amet**。

我拥有的 JavaScript 代码可以执行此操作，但一次只能执行一次。当我调用 toBold("ipsum")，然后调用 toBold("amen") 时，该函数只会加粗 met。该函数只会将最后一次函数调用中的参数加粗。

        var haystackText = document.getElementById('x').innerHTML;
        var replaced = "";

        function toBold (y) {
            var match = new RegExp(y, "ig");
            var boldText = "<div style=\"display: inline; font-weight: bold;\">" + y + "</div>";
            replaced = haystackText.replace(match, boldText);
            document.getElementById('x').innerHTML = replaced;
        }

我怎样才能改变这个函数，使“ipsum”和“amet”都变成粗体？

谢谢你的帮助

Answer 1

虽然此方法存在问题(如@epascarello 所述)，但这里的主要问题是 haystackText从未更新过，并将始终使用原始值:

    function toBold (y) {
        var match = new RegExp(y, "ig");
        var boldText = "<div style=\"display: inline; font-weight: bold;\">" + y + "</div>";
        replaced = haystackText.replace(match, boldText);
        haystackText = replaced;
        document.getElementById('x').innerHTML = replaced;
    }

此外，正如我在评论中指出的，您还可以使用 <b>或 <strong>而不是加粗。 Here is a fiddle example .