-3

I have some text that I've fetched from an API and need to wrap a word in it, say "Biography", with <span> and </span> tags so that I can style it differently from the surrounding text. How I can use jQuery or JavaScript to do this?

Mark Amery
  • 143,130
  • 81
  • 406
  • 459
user5248
  • 347
  • 1
  • 3
  • 21

2 Answers2

2
<!DOCTYPE html>
<html>
<head>
<style>
    .big{ font-size: 55px;  }
</style>
<script>
function chng(){
    var text = document.getElementById('pText').innerHTML;
    var text2 = text.replace('Germany','<span class="big">Germany</span>');
    document.getElementById('pText').innerHTML = text2;
}

</script>

</head>

<body>
<p id="pText">
Brazil - England - Germany
</p>
<button onclick="chng()">Try it</button>
</body>
</html>
Norberto Alves Filho
  • 19
  • 3
-1

How are the words supposed to be chosen for wrapping (although we don't know what you mean)? It seems you have to do this on your content generation (in PHP, .Net, asp, ect). So you create the classes on css and use them on content generation, something like (php): echo 'This is mytext.'; (css): .big {font-weight: bold; font-size: 40px;}

Norberto Alves Filho
  • 19
  • 3
  • I'm using a Wordpress plugin to insert Google Sheets data. It comes in in the form of unstyled tables. The tables themselves don't have any specific css, so I cannot target anything specific in the table, unless I inject styling via javascript based on specific words. – user5248 Aug 01 '17 at 17:12
  • I thing I got it. See new answer – Norberto Alves Filho Aug 01 '17 at 19:24