How to wrap string which is sibling to strong tag in new tag using jquery?

Question

In an html like the sample below, I need to wrap the text I need to select part in a span tag with a custom class, but how do I select just that part excluding the content in the strong tags above it, using jquery?

<span>
  <strong> random gibberish </strong>
  text I need to select
</span>

Edit: simply using .text() on parent won't work because that converts the whole inner html to text including the part in strong

@melvin The actual requirement is to highlight the product names in a html list which I am being sent from an api call. I do not have access to the api code itself. — Btdev, Oct 27 '18 at 13:56
@Mowzey yes, that gives `random gibberish text I need to select` , basically converts the entire inner html to text. — Btdev, Oct 27 '18 at 13:59
@benvc thanks, but how do I put the modified text back in that span replacing that original text? — Btdev, Oct 27 '18 at 14:07
Possible duplicate of [How to wrap previous and next sibling text of
with div using jquery?](https://stackoverflow.com/questions/39685334/how-to-wrap-previous-and-next-sibling-text-of-br-with-div-using-jquery) — Mohammad, Oct 27 '18 at 14:14
Does this answer your question? [Using .text() to retrieve only text not nested in child tags](https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags) — benvc, Oct 29 '19 at 18:10

gavgrif · Answer 1 · 2018-10-27T14:22:23.723

You can use nextSibling.nodeValue to get the text immediately after the strong tag. Then you can do a replace() on the text content to wrap the tags around it - I am doing it using a span with a newClass and related styling.

var strongEl = document.querySelector('strong');
var siblingEl = strongEl.nextSibling.nodeValue;
var spanContent = $('span').html();
var newSpanContent = '<span class="newClass">'+siblingEl +'</span>';
$('span').html(spanContent.replace(siblingEl, newSpanContent));

console.log(siblingEl);

span.newClass {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <strong> random gibberish </strong>
  text I need to select
</span>

score 1 · Accepted Answer · answered Oct 27 '18 at 14:17

You can use contents and eq functions:

$('span').each(function() {
  $(this).contents().eq(2).wrap('<span class="someClass"/>')
});

.someClass {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <strong> random gibberish </strong>
  text I need to select
</span>

score 0 · Answer 3 · answered Oct 27 '18 at 14:24

You can use .after( function ) to do this work. So in function callback get next text of strong using nextSibling property and wrap it in span

$("span > strong").after(function(){
  return "<span class='new'>"+$(this.nextSibling).remove().text()+"</div>";  
});

.new {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <strong> random gibberish </strong>
  text I need to select
</span>

How to wrap string which is sibling to strong tag in new tag using jquery?

3 Answers3