使用 JavaScript 将封装在星号 (*) 中的动态文本更改为 web-page 上的 link

Question

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

*www.google.co.uk/Google*
*www.whosebug.com/Whosebug*

锚标签：

<a href="www.google.co.uk/">Google</a>
<a href="www.whosebug.com/">Whosebug</a>

使用JavaScript/Jquery。第一部分是 link，第二部分是文本。我对此进行了几次尝试，并使用了此处的一些示例（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 但这是我试图只替换应该是 link 的文本而不是其余的文本页。但这只是在我的页面上留下了 link，没有别的。

然后我尝试了一些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);
});

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

提前致谢

编辑：*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，只是段落（有些甚至没有类！）。我希望我可以发送一个 link 但它是内部的。

links 始终以 http(s) 开头有效，有时可能以文件路径

结尾

谢谢

编辑：3

使用 Joels 代码，我正在遍历 body 寻找 link，它似乎对所有这些都有效，这太棒了！我现在遇到的唯一问题是，当我替换它时，它不是 hyperlink 而只是文本。我是否遗漏了一些明显的东西？

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

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

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

这会找到 * 然后开始以名称 'domain'

捕获

它搜索定界符^，在那里停止第一个捕获组，并开始下一个名为'text'
[=52=的捕获组]
它一直捕获直到它命中下一个*
它运行替换命令，并删除整个正则表达式匹配（从 * 到 *），并创建a link <a href=' 然后添加第一个捕获组。它关闭打开的<a>然后使用标签之间的'text'，最后关闭它

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

请记住，您可以将 div 搜索更改为任何内容，但似乎每个 link 都在 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>

使用 JavaScript 将封装在星号 (*) 中的动态文本更改为 web-page 上的 link

Changing dynamic text that's encapsulated in asterisks (*) to a link on web-page using JavaScript

html

javascript

jquery

hyperlink