Jquery format text inside href by making bold text for the first delimitter

user_388388 0
Viewed 43

I have a href as follow

<a id="EventId" href="/Test/TestDetail?TestDetailId=1">1 2021</a>

I have a requirement where I need to apply the text to be bold for the first delimitter till space. In this example the href should be

<a id="EventId" href="/Test/TestDetail?TestDetailId=1">**1** 2021</a>

I tried something like as follows but didn't worked

var txt = $('#EventId').text().split(' ');
$("#EventId").html(txt.replace(/(^w+)/, '<strong>$1</strong>'));

Can some one let me know what is the correct way to do this. The link should not be changed only the text should be appear in bold

jquery
4 Answers

You will want to use this :

$(document).ready(function() {
    var text = $('#EventId').text();
    textArray = text.split(" ");
    textArray[0] = "<strong>" + textArray[0] + "</strong>";
    newtext = textArray.join(" ");
    $('#EventId').html(newtext);
})

Get the text, split it - as you were doing - into an array, surround the first element of the array with the bold tags, then join the array. Finally you need .html(newtext) rather than .text(newtext) to replace the content, as otherwise it will just show the tags, rather than render them.

user_29121010

You are replacing literal w because of missing \. Also you do not need to split text, as array does not not have .replace() method

$(document).ready(function() {
  var txt = $('#EventId').text();
  $("#EventId").html(txt.replace(/^(\w+)/, '<strong>$1</strong>'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<a id="EventId" href="/Test/TestDetail?TestDetailId=1">1 2021</a>

user_13462340

very simple form

let txt = $('#EventId').text().split(' ');
txt[0] = '<strong>'+txt[0]+'</strong>';
let g = txt.join(" ");
$("#EventId").html(g);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="EventId" href="/Test/TestDetail?TestDetailId=1">1 2021</a>

user_149124020

I think for text format better use css.

For select first letter (!!if it contain only one digit) with css pseudo ::first-letter but you need wrap text in <p> tag

#EventId p::first-letter{
 color:red;
 font-weight: bold;
}
<a id="EventId" href="/Test/TestDetail?TestDetailId=1"><p>1 2021</p></a>

For more than 1 digit better use <span>12</span> 0909

#EventId span{
 color: red;
 font-weight: bold;
}
<a id="EventId" href="/Test/TestDetail?TestDetailId=1"><span>12</span> 2021</a>

UPD: answer to comment

OP asks how to put that in your second example – Justinas

If we look at example 1 2021 - is the month and year I sure that this is date of some event with some eventid witch we get from some backend. Date format like 1 2021 is not standart format (we formated it on backend) same way like you convert from DB to 1 2021 you can convert it to <span>1</span> 2021 to prevent double conversion

user_141358250
Related