how to just bold partial text instead of whole in td by jquery?

Question

<td> ABCDE </td>

$("td:contains('CD')").css("font-weight","Bold");

This will bold whole text like: ABCDE. How can I just bold text CD like "ABCDE"?

You can only set styling on a whole text node. If you want to style part of it you need to split it in to separate nodes, by wrapping the part you want to make bold in a `span`, for example — Rory McCrossan, Aug 17 '17 at 15:59

score 0 · Accepted Answer · answered Aug 17 '17 at 16:07

Using a text replacement using HTML markup, but you need to specify the text to replace :

$("td:contains('CD')").each(function(td,item){
    $(item).html($(item).html().replace("CD","<b>CD</b>"))
});

See https://jsfiddle.net/qo5zxx9a/

Another solution is to write the cell content using HTML markup:

<td>AB<span class="bold">CD</span>E</td>

score 0 · Answer 2 · answered Aug 17 '17 at 16:08

Here is an example based on this answer.

function highlight(word, element) {
    var rgxp = new RegExp(word, 'g')
    var repl = '<span class="bold">' + word + '</span>'
    element.innerHTML = element.innerHTML.replace(rgxp, repl)
}

var element = document.querySelector('td')
highlight('CD', element)

.bold {
  font-weight: bold;
}

<table>
  <td> ABCDE </td>
</table>

how to just bold partial text instead of whole in td by jquery?

2 Answers2