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 ie:

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

General approach to solve the problem

• Get the .text(), check if the last character is a comma
• If it is, remove the last comma from the .html() with lastindexof
• Apply this string to the element

Answer 2

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> 

Answer 3

Here's a fiddle to a working example:

http://jsfiddle.net/ooehwkqy/6/

$(function(){
    $('#remCom').on('click', function(){
        $('#CorrectHTML').html('');
        $('li').each(function(){
            var thisText = $(this).html().trim();
            var result = /[^,]*$/.exec(thisText)[0];
            result = result.replace(/(<([^>]+)>)/ig, "");
            if(!result){
                thisText = thisText.replace(/,([^,]*)$/,'$1');
            }
            $('#CorrectHTML').append('<li>' + thisText + '</li>');
        });    
    });
});

Basically, use regex to remove any characters that you don't want and replace them with nothing.

EDIT

This accounts for commas that also are scattered before and after formatting tags and only removes the commas at the ends.

Answer 4

Try this

 $(function() { var $ul=$("ul"), text = $ul.text().split(" "), last = $.trim(text[text.length-1]); if (last && last.lastIndexOf(",")==last.length-1) { $ul.replaceWith( $ul[0].outerHTML.replace(last,last.substring(0,last.length-1)) ); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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> 

To run over all LIs do this:

 $(function() { $("ul li").each(function() { var $li = $(this), text = $li.text().split(" "), last = $.trim(text[text.length - 1]); if (last && last.lastIndexOf(",") == last.length - 1) { $li.replaceWith( $li[0].outerHTML.replace(last, last.substring(0, last.length - 1)) ); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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> <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>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>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>