使用 JavaScript 将封装在星号 (*) 中的动态文本更改为网页上的链接

Question

我有一个奇怪的情况，我需要更改 html 页面上的文本，如下所示：

*www.google.co.uk/Google*
*www.stackoverflow.com/StackOverflow*

到锚标签：

<a href="www.google.co.uk/">Google</a>
<a href="www.stackoverflow.com/">StackOverflow</a>

使用 JavaScript/Jquery。 第一部分是链接，第二部分是文本。 我对此进行了一些尝试，并使用了这里的一些示例（SO），但我正在努力使它们适合我的用例。

起初我正在尝试这样的事情：

var html=document.getElementsByTagName('body')[0].innerHTML;
html = html.replace(/\*([^*]+)\*/g , '<a href="www.google.co.uk>placeholder</a>"');
document.getElementsByTagName('body')[0].innerHTML=html;

我意识到这并没有拆分我的文本，也没有实际更改 URL 但这是我试图仅替换应该是链接的文本而不是页面的 rest。 但这只是在我的页面上留下了链接，没有别的。

然后我尝试了一些 JQuery，我必须在前言我不太了解：

$("body").children().each(function () {
var reg = new RegExp(/\*([^*]+)\*/g, 'g');
const test = $(this).html( $(this).html().match(reg) );

// $(this).html( $(this).html().replace(/^/g,"$") );

console.log(test);
});

结果是打印出链接，但我想我会得到一些帮助！

提前致谢

编辑：* 2

网站上的 html 如下所示：

<div class="tnc"> By making a booking, You are agreeing to the  *https://digital.nhs.uk/about-nhs-digital/terms-and-conditions^terms and conditions* and will follow the COVID-19 precautions set in the email confirmation </div> 

预期结果：

<div class="tnc"> By making a booking, You are agreeing to the  <a href="https://digital.nhs.uk/about-nhs-digital/terms-and-conditions">terms and conditions</a> and will follow the COVID-19 precautions set in the email confirmation </div> 

这只是一个示例，页面上有多个类似的示例，有些没有 div，只是段落（有些甚至没有类。）。 我希望我可以发送一个链接，但它是内部的。

链接始终以 http(s) 开头有效，有时可能以文件路径结尾

谢谢

编辑：3

使用 Joels 代码，我正在遍历身体寻找链接，它似乎正在处理所有这些链接，这很棒。 我现在唯一遇到的问题是，当我替换 a 时，它不是超链接，而只是文本。？ 我错过了一些明显的东西吗？

const regex = /\*(.*[.].*)\^(.*)\*/;

$("body").children().each(function () {
  var preText = this.innerHTML;
  var matches = regex.exec(preText);
  var a = document.createElement('a');
  a.href = matches[1];
  a.text = matches[2];

  const newText = matches.input.replace(matches[0], a);

  this.innerHTML = newText;
});

Answer 1

好的 - 这是您需要的解决方案。 我做了一些命名以使其更具可读性。 这是它的作用：

1. 它在每个<div>中搜索与正则表达式模式匹配的/\*(?<domain>.*[.].*)\^(?<text>.*)\*/

这会找到* ，然后开始在名称“域”下捕获

2. 它搜索分隔符^ ，然后停止第一个捕获组，并开始下一个称为“文本”的捕获组

3. 它会一直捕捉到下一个*

4. 它运行替换命令，并删除整个正则表达式匹配（从*到* ），并创建一个链接<a href='然后添加第一个捕获组。 它关闭打开的<a>然后使用标签之间的“文本”，最后关闭它。

我添加了多个名称略有不同的名称，以表明它有效。 :)

请记住，您可以将div搜索更改为任何内容，但似乎每个链接都将位于 div 内，因此这可能会稍微加快速度。

 const elements = document.querySelectorAll("div"); elements.forEach( element => { element.innerHTML = element.innerHTML.replace(/\*(?<domain>.*[.].*)\^(?<text>.*)\*/, `<a href="$<domain>">$<text></a>`); });

 a { display: inline-block; }

 <div class="tnc"> By making a booking, You are agreeing to the *https://digital.nhs.uk/about-nhs-digital/terms-and-conditions^terms and conditions* and will follow the COVID-19 precautions set in the email confirmation </div> <div class="tnc"> By making a booking, You are agreeing to the *https://google.com/about-nhs-digital/terms-and-conditions^terms and conditions* and will follow the COVID-19 precautions set in the email confirmation </div> <div class="tnc"> By making a booking, You are agreeing to the *https://yetanotherdomain.com/about-nhs-digital/^another string* and will follow the COVID-19 precautions set in the email confirmation </div> <div class="tnc"> By making a booking, You are agreeing to the *https://digital3.nhs.uk/about-nhs-digital/terms-and-conditions^other terms* and will follow the COVID-19 precautions set in the email confirmation </div>