Как выбрать все вхождения телефонных номеров внутри определенного div с помощью регулярных выражений и заменить их новым кодом, используя jquery - PullRequest
0 голосов
/ 10 декабря 2018

Допустим, у меня есть div со следующим содержимым

<body> <div id="mydiv">This is some number +387(0)61 833-312. Here is one more number +385 (95) 837 312 . <p> One more number here +385(95) 835-312</p> <p>One more number 061/665-151</p>One more phone: 061-353-654</p></div> </body>

Мне нужен jquery с регулярным выражением, которое при загрузке документа заменяет каждый номер телефона на:

<span class="telefon" data-last="PHONENUMBER"><span class="telefon2">click here to show</span></span>

Таким образом, вывод будет:

<body>
<div id="mydiv">This is some number <span class="telefon" data-last="+387(0)61 833-312"><span class="telefon2">click here to show</span></span>. Here is one more number <span class="telefon" data-last="+385 (95) 837 312"><span class="telefon2">click here to show</span></span> <p> One more number here <span class="telefon" data-last="+385(95) 835-312"><span class="telefon2">click here to show</span></span></p> <p>One more number <span class="telefon" data-last="061/665-151"><span class="telefon2">click here to show</span></span> </p>One more phone: <span class="telefon" data-last="061-353-654"><span class="telefon2">click here to show</span></span></p></div>
</body>

Вот регулярное выражение, которое я строю:

/[+]{0,1}[\d]{1,4}[\s]{0,1}[/]{0,1}[(]{0,1}[\d]{0,3}[)]{0,1}\s{0,1}\d{2,4}[-]{0,1}[\s]{0,1}[\d]{2,4}[-]{0,1}[\s]{0,1}[\d]{1,4}/gm

У меня уже есть этот jquery в моем коде, и мне нужно запустить это решение перед этим кодом:

<script>
$(document).ready(function() {
  $('.telefon').toggle(function() {
    $(this).find('span').text('Click to show');
  }, function() {
    $(this).find('span').text($(this).data('last'));
  }).click();
});

класс .telefon действительно существует в HTML-коде.

РЕДАКТИРОВАТЬ: Педро Лобито предоставил решение для первой части, но как я могу выполнить код Педро Лобито перед этим кодом выше?Я попытался поместить его код ниже этого, но регулярное выражение не работает, я имею в виду, что оно выдает $ 1, а не HTML-код, который мы написали.

1 Ответ

0 голосов
/ 10 декабря 2018

Вы можете попробовать что-то вроде:

result = $('#mydiv').prop('outerHTML').replace(/(?!\s|\/)([\d\+\(\)\s\/-]+)/mg, '<span class="telefon" data-last="$1"><span class="telefon2">click here to show</span></span>');

$("#mydiv").html(result);
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="mydiv">
This is some number +387(0)61 833-312. Here is one more number +385 (95) 837 312 . <p> One more number here +385(95) 835-312</p> <p>One more number 061/665-151</p>One more phone: 061-353-654</p>
</div>
</body>
</html>

Примечания:

  1. Регулярное выражение работает со всеми номерами телефонов, присутствующими в предоставленной строке,но может не работать с другими примерами.
  2. Regex Demo
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...