Функция замены Regex не обновляет DOM ожидаемым образом

Question

Я пытаюсь обновить мой HTML с помощью регулярных выражений и JavaScript.Я могу захватить группу, которую я намереваюсь, однако ничто в Доме не меняется так, как я ожидал.

Я хочу обнаружить все упоминания валют AUD, у меня есть регулярное выражение, которое это фиксирует.Затем мне нужно изменить способ отображения.

Я использовал функцию .replace, но, похоже, она ничего не меняет.Кажется, это только изменится в console.log.

10AUD

Помогите нам всем

<p> 20THB</p>

<p> There is 100USD, here</p>

<p>More random sentances that should not be evalued even with 500 numbers in it</p>

<p>Here I can write a bunch like I had 300THB in my pocket and a spare 50AUD note aswell</p> 

Вот часть js.

regAUD = RegExp(/([0-9]+(AUD))/gi);

function checker() {
    str = document.getElementsByTagName('p');
    //str = str.innerText;
    for (i = 0; i < str.length; i++) {
       str[i].id = String(i+"para");
        console.log(str[i].innerText);
        inner = str[i].innerText;
        //Now make an if statement to if we go further
        //res = isCurrency(inner); //This passes correctly
        res = 1;
        if(res === 1){
            if(regAUD.test(inner)){
                inner = inner.replace(regAUD, '<b>$1</b>');
                console.log(inner);
                console.log("Done?");
            }
        }
    }
}

Я предполагаю, что использую функцию неправильно.Он отображается в консоли, но не в ожидаемых элементах.Это ничего не меняет, то есть я ожидаю, что в настоящее время оно выделит жирным шрифтом 10 AUD и 500 AUD, но это не так.Есть ли лучший способ добиться этого изменения в DOM или я использовал эту функцию неправильно?

Answer 1

Вы забыли привязать свою новую строку HTML к собственному HTML соответствующих элементов.

Кроме того, у вас может быть более короткая функция.

Вот один с двумя параметрами:

• selector для выделения выделенных элементов.
• currency для выделения требуемой валюты.

// Highlights "AUD" mentions winthin all <p> elements.
highlightCurrencyFromElement('p', 'aud');

function highlightCurrencyFromElement(selector, currency) {
  const elements = document.querySelectorAll(selector),
    pattern = new RegExp(`(\\d+\\s*${currency})`, 'gi');
    
  for (let i = 0; i < elements.length; i++) {
    elements[i].innerHTML = elements[i].innerHTML.replace(pattern, '<b>$1</b>');
  }
}

<div>
  <p>5</p>
  <p>21 AUD</p>
</div>

<div>
  <p>50AUD</p>
  <p>50 €</p>
  <p>87 USD</p>
  <span>20 AUD (in span, so no highlighted)</span>
<div>

Answer 2

Вы должны установить абзац innerHTML porperty после замены regxmatch для замены в DOM.

regAUD = RegExp(/([0-9]+(AUD))/gi);

function checker() {
    str = document.getElementsByTagName('p');
    //str = str.innerText;
    for (i = 0; i < str.length; i++) {
       str[i].id = String(i+"para");
        console.log(str[i].innerText);
        inner = str[i].innerText;
        //Now make an if statement to if we go further
        //res = isCurrency(inner); //This passes correctly
        res = 1;
        if(res === 1){
            if(regAUD.test(inner)){
                inner = inner.replace(regAUD, '<b>$1</b>');
                str[i].innerHTML= inner;
                console.log(inner);
                console.log("Done?");
            }
        }
    }
}