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

虽然此方法存在问题（ as @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

Answer 2

一种方法可能是使用toBold作为"(" + y.join(")|(") + ")"将数组传递给RegExp;利用replacement的{{1}}函数设置每个捕获的单词

.replace()

var haystackText = document.getElementById('x').innerHTML;
var replaced = "";

function toBold(y) {
  var match = new RegExp("(" + y.join(")|(") + ")", "gi");
  replaced = haystackText.replace(match, function(match) {
    return "<div style=\"display: inline; font-weight: bold;\">" 
           + match 
           + "</div>";
  });
  document.getElementById('x').innerHTML = replaced;
}

toBold(["ipsum", "amet"])

Answer 3

工作小提琴：https://jsfiddle.net/w01tzoux/

<强>的JavaScript

function toBold(targetString) {

  var original = document.getElementById('x').innerHTML;

  var replaced = original.replace(targetString, "<b>" + targetString + "</b>");

  document.getElementById('x').innerHTML = replaced;

}

toBold ("ipsum");
toBold ("amet");

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

3 个答案: