CODEWITHSUNDEEP
jquery
sol
sol

Reputation: 22919

How to convert specific text into hyperlink?

I'm trying to find specific text in a string, and if found wrap it in a link.

CODEPEN

The text I am looking for is in the format:

number | letter | 4 random numbers

Example: 7Q3847

With jQuery I can find one example (where the random numbers are hard-coded) and successfully convert it into a link. Here is my code so far:

$('.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);
});

What I'd like instead, is to have the var code be able to search for any text starting with the 7Q or 7T...

I would appreciate any help with this!

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>

Upvotes: 0

Views: 210

Answers (3)

K D
K D

Reputation: 5989

You can try following regex to do this

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)

Above regex will find any string which start with 7Q and will wrap that into anchor tag. Let me know if you want this expression to be more specific such as.. It should check for 4 digits after 7Q. We can add that as well

In case you want to add constrain for 4 numbers ... try following

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)

Upvotes: 1

Justinas
Justinas

Reputation: 43441

You can use $1 to place matched element back to text.

So replacement would be /(\d\w\d{4})/ to <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>

Upvotes: 2

Roylyan Nikita
Roylyan Nikita

Reputation: 83

Instead of manually using value use regex string:

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

This regex matches string with 1 digit,1 alphabet char, 4 digits.

Upvotes: 1

Related Questions