从字符串中提取数字并将它们包装在 HTML 中

Question

My requirement is as follows. I have this example text:

html

9216143567 is the number and other one is 0112388908

Now I want a JS function which finds then numbers which are together and greater than 8 in number and adds html code around them like below

<a href="tel:9216143567" class="button button-positive">9216143567</a> is the number and other one is <a href="tel:0112388908" class="button button-positive">0112388908</a>

What is the right way to do this?

Answer 1

Try this. Takes string as input and gives HTML as output.

 var abc = 'ei32eoeiq 9216143567 is the number and other one is 0112388908, 7878787878,deewodiwqodiwp 9898903232'; var splitArray = abc.match(/\\d+/g); for(var i = 0 ; i < splitArray.length; i++){ value = splitArray[i]; if(value.length>8) { abc = abc.replace(value, '<a href="tel:'+value+'" class="button button-positive">'+value+'</a>'); } } console.log(abc); document.getElementById("ans").innerHTML = abc;

 <div id="ans"></div>

Answer 2

This can be solved with a regex : (\\d{8,})[^\\d]+(\\d{8,})/g

It matches two matching groups, each of them wraps a number of at least 8 digits; where the two numbers are separated by at least one non-digit character.

 let input = document.getElementById("input").innerHTML; let regex = /(\\d{8,})[^\\d]+(\\d{8,})/g; let matches = regex.exec(input); document.getElementById("ans").innerHTML = "OUTPUT: The first num is " + matches[1] + " and the second is " + matches[2];

 <div id="input"> INPUT: 9216143567 is the number and other one is 0112388908 </div><br> <div id="ans"></div>

Edit:

If you want to extract a dynamic number of numbers, you can use a simpler regex, \\d{8,} . I've also modified the code so it replaces the original number with a URL that directs to it.

 let input = document.getElementById("input").innerHTML; let regex = /\\d{8,}/g; let match; let matches_array = []; while (match = regex.exec(input)) { matches_array.push(match); } for (let i = 0; i < matches_array.length; i++) { let tmp = '<a href="tel:' + matches_array[i] + '" class="button button-positive">' + matches_array[i] + '</a>'; input = input.replace(new RegExp(matches_array[i], "g"), tmp); } document.getElementById("ans").innerHTML = input;

 <div id="input"> 9216143567 is the number and other one is 0112388908 and the third is 1234567890 </div><br> <div id="ans"></div>