如何將特定文本轉換爲超鏈接？

Question

我試圖找到一個字符串中的特定文本，如果發現它包含在一個鏈接。

CODEPEN

我正在尋找的文本的格式爲：

號|字母| 4張隨機數

實施例：7Q3847

使用jQuery我能找到一個例如（其中，隨機數是硬編碼的），併成功地將它轉換成一個鏈接。這是我到目前爲止的代碼：

$('.text').each(function(){ 
    var code = '7Q2992'; 
    code = code.replace(/\W/g, ''); 
    var str = code.split(" "); 
    var link = $(this).text(); 
    text = link.replace(str, "<a href='https://www.google.ie/?gws_rd=cr&ei=4j6LWLm4DcbYU6-KvZgB#safe=active&q=" + code + "'>" + str + "</a>"); 
    $(this).html(text); 
}); 

我想要什麼，而不是，是有VAR code能夠搜索開始與7Q或7T任何文字...

我將不勝感激任何幫助！

FULL SNIPPET

$('.text').each(function() { 
 
    var code = '7Q2992'; 
 
    code = code.replace(/\W/g, ''); 
 
    var str = code.split(" "); 
 
    var link = $(this).text(); 
 
    text = link.replace(str, "<a href='https://www.google.ie/?gws_rd=cr&ei=4j6LWLm4DcbYU6-KvZgB#safe=active&q=" + code + "'>" + str + "</a>"); 
 
    $(this).html(text); 
 
});

body { 
 
    width: 580px; 
 
    margin: 50px auto 0; 
 
    font-family: sans-serif; 
 
    font-size: 16px; 
 
} 
 
.output { 
 
    float: left; 
 
} 
 
.ideal { 
 
    float: right; 
 
} 
 
header { 
 
    color: white; 
 
    padding: 10px; 
 
} 
 
.red { 
 
    background: red; 
 
} 
 
.green { 
 
    background: green; 
 
} 
 
p { 
 
    line-height: 1.5; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="output"> 
 
    <header class="red">Current output</header> 
 
    <p class="text"> 
 
    Text containing letters 7Q2992 
 
    </p> 
 
    <p class="text"> 
 
    Text containing letters 7T3940 
 
    </p> 
 
    <p class="text"> 
 
    Text containing letters 7Q3940 
 
    </p> 
 
</div> 
 
<div class="ideal"> 
 
    <header class="green">Desired output</header> 
 
    <p> 
 
    Text containing letters 
 
    <a href="https://www.google.ie/?gws_rd=cr&ei=4j6LWLm4DcbYU6-KvZgB#safe=active&q=7Q2992">7Q2992</a> 
 
    </p> 
 
    <p> 
 
    Text containing letters <a href="https://www.google.ie/?gws_rd=cr&ei=4j6LWLm4DcbYU6-KvZgB#safe=active&q=7T3940">7T3940</a> 
 
    </p> 
 
    <p> 
 
    Text containing letters <a href="https://www.google.ie/?gws_rd=cr&ei=4j6LWLm4DcbYU6-KvZgB#safe=active&q=7Q3940">7Q3940</a> 
 
    </p> 
 
</div>

Answer 1

您可以使用$1將匹配的元素放回文本。

所以更換是/(\d\w\d{4})/到<a href="$1">$1</a>

$(document).ready(function() { 
 
    $('.output .text, .ideal p').each(function() { 
 
    var text = $(this).text().replace(/(\d\w\d{4})/i, '<a href="http://google.com/$1">#$1</a>'); 
 

 
    $(this).html(text); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="output"> 
 
    <header class="red">Current output</header> 
 
    <p class="text"> 
 
    Text containing letters 7Q2992 
 
    </p> 
 
    <p class="text"> 
 
    Text containing letters 7T3940 
 
    </p> 
 
    <p class="text"> 
 
    Text containing letters 7Q3940 
 
    </p> 
 
</div> 
 
<div class="ideal"> 
 
    <header class="green">Desired output</header> 
 
    <p> 
 
    Text containing letters 7Q2992 
 
    </p> 
 
    <p> 
 
    Text containing letters 7T3940 
 
    </p> 
 
    <p> 
 
    Text containing letters 7Q3940 
 
    </p> 
 
</div>

Answer 2

代替使用值使用正則表達式串手動：

\d{1}[a-zA-Z]{1}\d{4}\g 

此正則表達式相匹配的字符串與1位，1個字母字符，4數字。

Answer 3

你可以試試下面的正則表達式來做到這一點

var text = "hello test 7Q2992"; 
text = text.replace(/(7Q.*)\b/g, "<a href='https://www.google.ie/?gws_rd=cr&ei=4j6LWLm4DcbYU6-KvZgB#safe=active&q=$1'>$1</a>"); 
console.log(text) 

上述正則表達式會發現它與7Q啓動任何字符串，將其包裹到錨標籤中。讓我知道你是否希望這個表達式更具體，例如..它應該在7Q後檢查4位數字。我們可以添加以及

在您要添加約束的4個數字的情況下...嘗試以下

var text = "hello test 7Q2992"; 
text = text.replace(/(7Q[0-9]{4})\b/g, "<a href='https://www.google.ie/?gws_rd=cr&ei=4j6LWLm4DcbYU6-KvZgB#safe=active&q=$1'>$1</a>"); 
console.log(text)