CODEWITHSUNDEEP
javascriptjquery
Jydon Mah
Jydon Mah

Reputation: 383

How can i target the second letter of a div using jQuery or Javascript

Good day,

How can i target the second letter of a div that the value is being get through API.

<div>example</div>

example is data that is being get through API and i want to add styling just in the second letter on it. how can i do that?

Upvotes: 0

Views: 1664

Answers (5)

Evgeny
Evgeny

Reputation: 6290

You might want to know that there is a ::first-letter pseudo-element in CSS, which unfortunately won't help you. And it only works on block-level elements.

var divs = document.querySelectorAll('div');

for (var el of divs) {
  var text = el.textContent;
  el.innerHTML = text[0] + '<span>' + text[1] + '</span>' + text.substring(2);
}
span {
  color: red;
}
<div>example1</div>
<div>example2</div>

Upvotes: 1

bishal
bishal

Reputation: 716

You can make use of splice on array object to insert an element in a specific index, in this case 1. Index 3 for the second time because index is shifted by one place.

arr.splice(index, 0, item) will insert item into arr at the specified index (deleting 0 items first, that is, it's just an insert). Found it here.

var str = document.getElementById('test').innerText().split('');
str.splice(1, 0, '<span class="colored">');
str.splice(3, 0, '</span>');
document.getElementById('test').innerText = str.join('');

.colored {
 color: blue;
}

<div id='test'>example</div>

Upvotes: 0

Akshay Hegde
Akshay Hegde

Reputation: 16997

Here is example :

var string = $('div').text(), t;

/*  
    1st letter - string.substr(0,1)
    2nd letter - string.substr(1,1) 
    2nd onwards - string.substr(2)
*/
t = string.substr(0,1) + '<span class="test">'+ string.substr(1,1) + '</span>' + string.substr(2);
   
console.log(t);
$('div').html(t);
.test{
 color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>example</div>

Upvotes: 1

Amit Kumar
Amit Kumar

Reputation: 5962

You can use prototype to replace char at index with with style content.

String.prototype.replaceAt=function(index, replaceChar) {
    var a = this.split("");
    a[index] = replaceChar;
    return a.join("");
}

var result ="example";
var secondChar = result.charAt(1);
var updatedContent = result.replaceAt(1, '<span class="test">'+secondChar+'</span>');
console.log(updatedContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

brk
brk

Reputation: 50316

You can split the string which will create an array of characters, then at the specified index add the HTML tag and the character.Use join to create the string again and replace method to replace comma (')

// creating an array the characters
var splitString = document.getElementById('textContent').innerHTML.split('');
// targeting the character at index 1
splitString[1] = '<span class ="custom">x</span>'
document.getElementById('textContent').innerHTML = splitString.join('').replace(/,/g, '')
.custom {
  color: red
}
<div id="textContent">example</div>

Upvotes: 1

Related Questions