我需要帮助使用 javascript 从 <p> 元素中获取数字

Question

我是 JavaScript 新手。我在<p> 标签中有 3 个 10 位数字，我想选择它们并将它们转换为链接。我能够获得数字并将它们转换为链接，但是我同时获得了所有 3 个数字和一个链接，如果我能得到一些帮助，那就太好了，谢谢

这是我的代码：

<p>
What 0123456789 exactly is this Worker thread module, 9876543210 and why do we need it? 9768352461 In this post, we will talk about the historical reasons concurrency is implemented in JavaScript and Node.js, the problems we might find, current solutions, and the future of parallel processing with Worker threads.
</p>

<script>
function myFunction() {
  var str = document.querySelector("p").innerHTML; 
  var link = 'https://www.google.com/search?q='+text;
  var rgx = /\d{10}/g;
  var text = str.match(rgx);
  var res = str.replace(rgx, '<a href= "'+link+'">"'+text+'"</a>');
  document.querySelector("p").innerHTML = res;
}

myFunction();

</script>

Answer 1

您可以在正则表达式中捕获某些表达式。然后，您可以使用$ 和组号从该组中获取价值。只有一组所以在这种情况下会有$1;

function myFunction() {
  var str = document.querySelector("p").innerHTML;
  var link = "https://www.google.com/search?q=$1";
  var rgx = /(\d{10})/g; // () wraps an expression in a group
  var text = str.match(rgx);
  var res = str.replace(rgx, '<a href= "' + link + '">$1</a>');
  document.querySelector("p").innerHTML = res;
}

更多关于捕获组：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges

编辑：我发现了一个更简单的方法——如果你想引用整个表达式，你不需要创建一个组。要插入匹配值，您可以使用$&:

function myFunction() {
  var str = document.querySelector("p").innerHTML;
  var link = "https://www.google.com/search?q=$&";
  var rgx = /\d{10}/g;
  var text = str.match(rgx);
  var res = str.replace(rgx, '<a href= "' + link + '">$&</a>');
  document.querySelector("p").innerHTML = res;
}

Answer 2

str.match(rgx); 

返回匹配字符串的数组。如果您只想在数组的项目上使用，您可以引用索引（如text[0]）或者您可以使用text.forEach循环遍历数组

或者你可以映射它并生成这样的链接：

let links = text.map((string) => { return `www.yourlink.com/${string}`})

Answer 3

在你的替换语句中使用文本而不是 rgx

var res = str.replace(text, '<a href= "'+link+'">"'+text+'"</a>');

这样你只替换匹配文本的实例而不是所有 rgx 匹配

编辑 应该这样做

function myFunction() {
  var str = document.querySelector("p").innerHTML; 
  var rgx = /\d{10}/g;
  var text = str.match(rgx);
  
  for (i=0; i<text.length; i++) { 
     var link = 'https://www.google.com/search?q='+text[i];
     str = str.replace(text[i], '<a href= "'+link+'">"'+text[i]+'"</a>');
  }
  
  document.querySelector("p").innerHTML = str;
}

myFunction();