Jquery - removing a character from HTML but leaving html tags unchanged

Question

I'm trying to build a simple CMS where users can write anything in contenteditable div. When they're saving their work I want to remove specific characters from the text they putted i.e.:

The text is:

<ul>
  <li>This is the text inserted by <b>user</b> and styled by him - there should be no comma at the end of a <b><i><u>LI element,</u></i></b></li>
</ul>

I know how to remove the comma with jquery .text(), but it just gives me a plain text without HTML tags. The problem is that I don't know if or how many HTML tags will be at the end of a sentence where the comma should be removed.

Is there any other way to remove this comma without touching a HTML tags? So after saving the work the text would stay styled as it should be but without comma at the end of LI element?

Simple fiddle: jsfiddle

Answer 1

This is probably not the cleanest way of doing it, but it works in your test cases. Might want to run an rtrim method on the text to remove whitespace. And would fail if someone added an empty element after the ,.

$(function(){
    
    function getLastTextNode(x){
        var last = x.last();
        var temp = last.contents();  //get elements inside the last node
        var lTemp = temp.last(); //Get the contents inside the last node
        if (temp.length>1 || lTemp[0].nodeType===1) {  //if the last node has multiple nodes or the last node is an element, than keep on walking the tree
            getLastTextNode(lTemp);  
        } else {  //we have a textNode
            var val = lTemp[0].nodeValue; //get the string
            lTemp[0].nodeValue = val.substr(0,val.length-1);  //chop off the comma
        }
    }
    
    $('#remCom').on('click', function(){
        $('#CorrectHTML').html('');
        $('li').each(function(){
            var li = $(this);
            //see if the last character is a comma.
            if (li.text().substr(-1)===",") {                
                getLastTextNode(li.contents());
            }
        });    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="HTMLtoBeChanged">
    <li>This is the text inserted by <b>user</b> and styled by him - there should be no comma at the end of a <b><i><u>LI element,</u></i></b></li>
    <li>Here is no comma at the end, so it should <b>stay as it is</b></li>
    <li>And here the comma should <b>dissapear also,</b></li>
</ul>
<button id="remCom">Remove commas</button>
<ul id="CorrectHTML"></ul>

Or you can do it this way. The issue with the html() way is if you added event handlers to any of the elements inside, they will be destroyed.

$(function() {
    $('#remCom').on('click', function() { 
        $('#CorrectHTML').html('');
        $('li').each(function() {
            var li = $(this);
            //see if the last character is a comma.
            if (li.text().trim().substr(-1) === ",") {
                var html = li.html(); //grab the html
                var pos = html.lastIndexOf(',');  //find the last comma
                html = html.substring(0, pos) + html.substring(pos + 1);  //remove it
                li.html(html);  //set back updated html
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="HTMLtoBeChanged">
  <li>This is the text inserted by <b>user</b> and styled by him - there should be no comma at the end of a <b><i><u>LI element,</u></i></b></li>
  <li>Here is no comma at the end, so it should <b>stay as it is</b></li>
  <li>And here the comma should <b>dissapear also,</b></li>
</ul>
<button id="remCom">Remove commas</button>
<ul id="CorrectHTML"></ul>