Блог

Вот мой код, но я не могу отобразить другие числа, потому что я проиндексировал [0], и я не знаю, как я могу отобразить другие числа.

 Example string: "Hello, you can contact me at 0744224422 or 0192234422."

Result code : "Hello, you can contact me at <span>0744224422</span> or <span>0744224422</span>."
 

В этом примере: мой код заменит «0192234422» на 0744224422 «, что логично», но я бы хотел, чтобы он отображал 0192234422… Как я могу это сделать?

Спасибо

 let selector = document.querySelectorAll('.message > div > .chat');
    for (let index = 0; index < selector.length; index  ) {
        if (selector[index].innerText) {
            let text = selector[index].innerText;
            const regex = /(d[s-]?)?[([s-]{0,2}?d{3}[)]s-]{0,2}?d{3}[s-]?d{4}/gim;
            if (text.match(regex).length) {
                const newTexte = ` <span>${text.match(regex)[0].trim()}</span> `;
                selector[index].innerHTML = text.replace(regex, newTexte); 
            };
        }
    }
 

Если вы используете символ $ замены функции replace, он поместит туда правильный текст. Вместо trim того, чтобы просто заключать в круглые скобки часть вашего регулярного выражения, не содержащую пробелов, и эффективно позволять группе захвата становиться операцией обрезки.

 let selector = document.querySelectorAll('.message > div > .chat');
    for (let index = 0; index < selector.length; index  ) {
        if (selector[index].innerText) {
            let text = selector[index].innerText;
            const regex = /(d[s-]?)?([([s-]{0,2}?d{3}[)]s-]{0,2}?d{3}[s-]?d{4})/gim;
            if (text.match(regex).length) {
                const newTexte = ` <span class="red">$2</span> `;
                selector[index].innerHTML = text.replace(regex, newTexte); 
            };
        }
    } 

 .red {
  background: yellow
} 

 <div class="message">
  <div>
    <div class="chat">Hello, you can contact me at 0744224422 or 0192234422.</div>
  </div>
</div> 

Я попытаюсь привлечь внимание к разнице в регулярных выражениях ниже: (потому что я добавил один набор круглых скобок)

/(d[s-]?)?[([ s-]{0,2}?d{3}[)]s-]{0,2}?d{3}[s-]?d{4}/gim
 ( )
/(d[s-]?)?([([ s-]{0,2}?d{3}[)]s-]{0,2}?d{3}[s-]?d{4})/gim;

У вас есть два отдельных экземпляра селектора? Если нет, то селектор.длина всего 1, поэтому отображается только первое число. Вы можете отредактировать html, чтобы иметь более одного экземпляра селектора (и стиль с помощью display: inline, чтобы он не прерывался на новую строку), например:

 let selector = document.querySelectorAll('.message > div > .chat');
    for (let index = 0; index < selector.length; index  ) {
        if (selector[index].innerText) {
            let text = selector[index].innerText;
            const regex = /(d[s-]?)?[([s-]{0,2}?d{3}[)]s-]{0,2}?d{3}[s-]?d{4}/gim;
            if (text.match(regex).length) {
                const newTexte = ` <span>${text.match(regex)[0].trim()}</span> `;
                selector[index].innerHTML = text.replace(regex, newTexte); 
            };
        }
    } 

 <div class="message">
  <div>
    <p class="chat" style="display:inline">
      Hello, you can contact me at 0744224422 or </p>
    <p class="chat" style="display:inline">0192234422</p>
    <!-- add more numbers as needed in another <p class="chat" style="display:inline" ></p>-->
  </div>
</div> 

Спасибо за ваши ответы, но я просто хотел бы добавить <span></span> (или больше), когда в строке записан номер телефона..