Find string and replace with HTML

Question

There is a table with a column which I want to separate in two. The cell's content of this column is e. g.

| Miami: banana         |
| Ft. Myers: pineapple  |

Now I want to split this into two columns (and cells) to appear like this:

| Miami      | banana      |   // <td> Miami </td><td> banana </td>
| Ft. Myers  | pineapple   |   // <td> Ft. Myers </td><td> pineapple </td>

I made a JavaScript to achieve this:

function foo(str) {
  result = str.replace(": ", "</td><td>");
}

$("td.valueCol").each(function(){
  $("td.valueCol").html(foo($(this).text()));
}

The result however is:

| bananas      |     // <td>bananas</td>
| pineapple    |     // <td>pineapple</td>

When I test it with a not parsed tag like result = str.replace(": ", "</xt><xt>") it shows, that the tags are swapped and quotation marks are added to the part before the tag:

| Miamibarbananas          |     // <td>"Miamibar"<xt>bananas</xt></td>
| Ft. Myersbarpineapple    |

Obviously replace or html() applies some sort of sanitizing. What is this, and what do I have to do to make it work properly?

post the exact string and also tell if '|' is in your string or you justed used it to show here ? give the actual string structure without any extra — Amir Rahman
– Amir Rahman, Commented Apr 21, 2022 at 18:53
@code The // is just to separate the resulting HTML markup from the appearance. :-) — Robbit
– Robbit, Commented Apr 21, 2022 at 18:56

Carsten Massmann · Accepted Answer · 2022-04-21 18:57:49Z

2

I just played around a little bit with some Vanilla JavaScript and it turns out that .outerHTML might "be your friend" here:

document.querySelectorAll("td")
 .forEach(td=>td.outerHTML=td.outerHTML.replace(":","</td><td>"))

TD {border: 1px solid grey}

<table>
<tr><td>a:b</td><td>v:d</td><td>ef</td></tr>
<tr><td>f:h</td><td>i:j</td><td>kl</td></tr>
<tr><td>m:n</td><td>o:p</td><td>rs</td></tr>
</table>

answered Apr 21, 2022 at 18:57

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kinglish Over a year ago

That's fun and old school :)

Carsten Massmann Over a year ago

Very old school - but helpful nonetheless. :D

Robbit Over a year ago

It is the most performant and simplest of the suggested solutions. Thank You very much. 😊

Kinglish · Accepted Answer · 2022-04-21 19:03:38Z

1

You can use jQuery's insertAfter() to create a new TD next to the one you're splitting.

$('table td').each(function() {
  let v = $(this).text().split(':');
  if (v.length > 1) {
    $(this).text(v[0]);
    $(`<td>${v[1]}</td>`).insertAfter($(this))
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1'>
  <tr>
    <td>Miami: banana</td>
    <td>Ft. Myers: pineapple</td>
  </tr>
</table>

edited Apr 21, 2022 at 19:03

answered Apr 21, 2022 at 18:48

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

1 Comment

Robbit Over a year ago

I still don't get it, why JS is swapping the tags. But Your way is a good comprehensible solution. Thank You!

Amir Rahman · Accepted Answer · 2022-04-21 19:30:53Z

1

firstly i wanted to say when you are selecting all td elements and nesting them with more td inside them which is invalid html although browser will sort this out so what i came up with is selecting all row and create new td's in one level by splitted array in below manner

$("tr").each(function(){
// iterate once per row
    let values = $(this).text().split(":"),
        newMarkup = ""
    values.forEach(function(each){newMarkup += "<td>" + each.trim() + "</td>"})
    $(this).html(newMarkup)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  tr,td {
    border:1px solid black;
    padding:2px;
  }
  td {padding:5px;}
</style>

<table>
    <tbody>
        <tr><td>Miami: banana</td></tr>
        <tr><td>Ft. Myers: pineapple</td></tr>
    </tbody>
</table>

answered Apr 21, 2022 at 19:30

Amir Rahman

1,1191 gold badge7 silver badges15 bronze badges

1 Comment

Robbit Over a year ago

My intention (and script) wasn't nesting td's into each other. Then I'd have to insert <td></td> to an existing td cell. What I want to do and what is working perfectly when done manually is inserting </td><td> which is valid html. ;-) Your suggested script variant is less simple than the other solutions but probably more generic. I might use it on an upcoming case. Thanks alot.

Collectives™ on Stack Overflow

Find string and replace with HTML

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related