How can i wrap text before this symbol without destroying existing html

Question

Trying to wrap all words prior to the "," in each td cell. Note that words prior to "," in each cell will be different , so can not target a specific word per se

Existing html


 lastName, firstName

Desired outcome


 lastName, firstName

Attempts, all of which destroy the a href structure, I need to keep the a tag with class, title and href as is and just wrap the word/words prior to ","

$('td.name').each(function() {
  $(this).html($(this).text().replace(/,.*$/, '$&'));
});

$('td.name').html(function(i, v) {
    return v.replace(/([^,]+)(,)/, '$1$2$3');
});

$('td.name').html(function (i, html) {
    return html.replace(/(.*?,)/, '$1')
});

user_283366 · Answer

You can create a TreeWalker for each and use it to find all the text nodes, passing in a filter to locate only the ones containing commas.

From there, you can split the text into chunks and map each pre-comma chunk to a new then replace the entire text node with the new set of nodes.

const createSpan = textContent => Object.assign(
  document.createElement("span"),
  { textContent }
)

const filter = {
  acceptNode: node =>
    node.data.includes(",") ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
}

document.querySelectorAll("td.name").forEach(td => {
  const treeWalker = document.createTreeWalker(
    td,
    NodeFilter.SHOW_TEXT, // select only text nodes
    filter,               // filter for content with commas
    false
  )
  
  let node
  
  while (node = treeWalker.nextNode()) {
    // split the text on comma, keeping the delimiter
    const chunks = node.data.split(/(?=,)/)
    
    // keep the last chunk as-is
    const last = chunks.pop()
    
    // replace the text node with the new node set
    node.replaceWith(...chunks.map(createSpan), last)
  }
})

span { color: red; }


  
    
      lastName, firstName
    
  
  
    
      no commas

I really didn't see any use for jQuery here.

user_13127428 · Answer

Glad you like jQuery, this few lines will get you going. Cheers!

$('.my_name').each(function() {
var my_text = $(this).find("a").text();
var my_wrap = my_text.replace(/[^,]*/, '$&');
$(this).find("a:contains(',')").empty().append(my_wrap);
});

.my_class { color: red; }



  
    
      lastName, firstName
    
    
    
      td 2 not affected

//Output
lastName, firstName

How can i wrap text before this symbol without destroying existing html

2 Answers