У меня есть 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» были выделены жирным шрифтом?

Спасибо вам за помощь

0
user5139637 16 Дек 2015 в 07:14

3 ответа

Лучший ответ

Хотя есть проблемы с этим методом ( как упомянуто @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> вместо жирного шрифта. Вот пример скрипки.

1
Spencer Wieczorek 16 Дек 2015 в 04:24

Одним из подходов может быть передача массива в toBold, используя "(" + y.join(")|(") + ")" в качестве RegExp; используя replacement функцию .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"])
<div id="x">Lorem ipsum dolor sit amet.</div>
0
guest271314 16 Дек 2015 в 04:24

Рабочая скрипка: 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");
0
Ahsan 16 Дек 2015 в 04:27