如何用html标签替换字符串[关闭]答案

【问题标题】：How to replace string with html tag [closed]如何用html标签替换字符串[关闭]
【发布时间】：2020-06-07 05:46:32
【问题描述】：

我正在尝试找到一些正则表达式，它将用 html 标签替换部分字符串。应该被替换的部分字符串如下所示： lorem Google=https://google.com ipsum

预期输出：lorem <a href="https://google.com">Google</a> ipsum

PS 我正在使用 reactjs

【问题讨论】：

看起来您需要找到“=http”并从那里找到前后的空格才能获得限制。然后拆分“=”并建立链接
如果您指定替换规则将非常有帮助。否则，你会在做非常相似的事情时得到无数的答案
好的，我编辑了问题

【解决方案1】：

var string = "Google=https://google.com";

var regex = /(\w*)=(https?\:\/\/\w*\.\w*)/gm;

var regexResult = regex.exec(string);

var newAtag = document.createElement('a');
newAtag.href = regexResult[2];
newAtag.innerHTML = regexResult[1];

console.log(newAtag);

document.body.appendChild(newAtag);

更新根据您的评论，如果字符串为"lorem Google=https://google.com ipsum"，则与上述基本完全相同。只是不要在匹配的正则表达式部分之前和之后触摸任何东西。看到这个：

var element = document.querySelector('div');
var string = element.innerHTML;

var regex = /(\w*)=(https?\:\/\/\w*\.\w*)/gm;

var regexResult = regex.exec(string);

var newAtag = document.createElement('a');
newAtag.href = regexResult[2];
newAtag.innerHTML = regexResult[1];
console.log(newAtag);

element.innerHTML = string.replace(regex, newAtag.outerHTML);

&lt;div&gt;lorem Google=https://google.com ipsum&lt;/div&gt;

【讨论】：

如果var string = "lorem Google=https://google.com ipsum"
在这种情况下我需要这个结果：lorem <a href="https://google.com">Google</a> ipsum
@caramba 好孩子
@ShotikoTopchishvili 如果解决了您的问题，请标记为已接受的答案

【解决方案2】：

试试这个

const ch = "Google=https://google.com"
const makeUrl = ch => {
  const [name, url] = ch.split(/=/)
  return `<a href="${url}">${name}</a>`
}

console.log(makeUrl(ch))

【讨论】：

【解决方案3】：

我建议使用 RegEx101 之类的工具来创建和测试 RegEx：

https://regex101.com/r/BSsJei/6

JavaScript 示例

var str=`# Expect (partially) valid
lorem Google=https://www.google.com ipsum
lorem Google=http://google.com
https://google.com

Long text with linebreaks - http://test.test with many links http://test.test
xxx http://test.TEST xxx https://www.subdomain.google.com.

# Correctly matched yet wrong URLs
https://www.google

# Expect invalid
http://googlecom
htt://google.com
xxx`;

var regEx = /https?:\/\/((\w+\.){1,2})?(\w+\.)\w+/gi;
var result = str.match(regEx);

console.log(result);

这将为您提供一个包含所有匹配 URL 的数组，然后您可以轻松地将其替换为 HTML 标记。

RegEx 模式旨在处理常见的 URL，但我没有使用更复杂的模式对其进行测试。对于实际使用，它仍然应该足够好。

模式解释

匹配 http/https
检查 0-2 个子域（例如 www.domain、www.subdomain.domain）
检查域名

【讨论】：

【解决方案4】：

你可以使用javascript的链接功能，它可以很好地工作，而且可读性强

const link = "Google=https://google.com"
const generateLink = link => {
  const [name, url] = link.split(/=/)
  return "Google".link(url)
}

console.log(generateLink (link))

【讨论】：