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

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

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

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>

CodePudding user response：

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  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 12 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 1 2021 to prevent double conversion