Как подсветить цифры в номере телефона с заданным форматированием?

Question

[IdFox]

Всем привет
Подскажите как решить задачу на PHP?
Так вроде бы простая, но как подойти не знаю...
Есть номер, допустим 987 123-45-67 (задано форматирование)
Может как вариант еще 987 (123) 45-67 ну и т.д
И нужно выделить цифры по маске (регулярке)
Т.е например маска #23.56#is
Задача - как подсветить указанные цифры в номере (css классом), сохранив при этом форматирование номера исходное?
Нужно получить 987 1<span class="class">23-45-6</span>7
Т.е берем входной номер, режем все кроме цифр, по заданной регулярке подсвечиваем, это все понятно
А как теперь восстановить исходное форматирование?
Подскажите как решить, чет не могу даже понять с какой стороны подойти :)
Всем спасибо

Comments

[Павел Корнилов]

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

[IdFox]

KorniloFF, может я что-то не понял, но обернуть можно и на php и в JS. Главное алгоритм.
А его как раз придумать и не могу.
Пример, что вы дали, как-то не похож на использование регулярок...

[Павел Корнилов]

IdFox, я имел в виду, что если вам важно

сохранив при этом форматирование номера исходное

на бэке, то тогда проще всё сделать на фронте. Тогда алгоритм будет уже понятен.
Или опять я не понял?

[IdFox]

KorniloFF, нет, не понял.
Ну выдаю я на фронт номер 987 123-45-67 вот как есть, передаю маску /23.56/ig
И как по ней подсветить в результате то?

[Павел Корнилов]

Так что ли?

<div id="num">
	<p>987 123-45-67</p>
	<p>987 (123) 45-67</p>
</div>
<script>
	var num = document.querySelector('#num');
	num.innerHTML = num.innerHTML.replace(/([2-6])+/g, "<span class=red>$1</span>")
</script>

[Павел Корнилов]

UPD

<div id="num">
	<p>987 123-45-67</p>
	<p>987 (123) 45-67</p>
</div>
<script>
	var num = document.querySelector('#num');
	num.innerHTML = num.innerHTML.replace(/([2-6]+)/g, "<span class=red>$1</span>")
</script>

[IdFox]

Вы вопрос читали? Мне не нужно подсвечивать цифры поштучно. Это же элементарно.
В вашем примере подсветится вообще все цифры от 2х до 6и
Вот вам номер 987 (123) 45-67, вот вам маска #23.56#is
Подсветите мне только цифры 23456
Т.е итоговый HTML будет
987 (1<span>23) 45-6</span>7
Ну или каждая цифра в своем SPAN, что в принципе не критично
Или другой пример
Номер 799 125 4785, маска 99*8, должны быть подсвечены цифры 99 125 478

Answer 1

[Максим Тимофеев]

1. Хранить в data атрибутах или вообще в href

<a id="phone" href="tel:[phone]" data-base-phone="987 123-45-67">
987 <span class="red">123</span>-45-67
</a>

2. Хранить в webStorage
https://www.w3schools.com/html/html5_webstorage.asp
3. Создать объект в js

var phone = {
clear: '9871234567', 
formated: '987 123-45-67'
.....
};

4. Сделать rest api посылать ajax получать в любых позах /someController/get-phone?id=1&type=clear&tags=0
Наверное еще 10 более экзотичных вариантов можно придумать, с сессией, с базой данных с куками и т.д.

Comments

[IdFox]

Что из написанного является решением вопроса?
Вы уже второй человек, кто не в ту степь
Переформулирую вопрос

function number_highlight($number, $reg_exp) {
....
....
....return $formated;
....
}

echo number_highlight('987 (123) 45-67', '21?3.56'); //987 (1<span>23) 45-6</span>7

Вот какое содержание number_highlight или хотя бы алгоритм написания ее

[Максим Тимофеев]

IdFox, Вы спросили:

А как теперь восстановить исходное форматирование?

я ответил. Разжевываю - не надо восстанавливать форматирование, надо хранить первоначальное состояние. Зачем лишняя логика?