JQuery - removing a character from HTML, but leaving html tags unchanged

Question

I am trying to create a simple CMS where users can write anything in a contenteditable div. When they save their work, I want to remove certain characters from the text that they put ie:

Text:

<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 a comma using jquery.text (), but it just gives me plain text without HTML tags. The problem is that I don’t know if or how many HTML tags there will be at the end of the sentence, where the comma should be removed.

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

Simple fiddle: jsfiddle

Answer 1

This is probably not the cleanest way to do this, but it works in your test cases. You may need to run the rtrim method on the text to remove spaces. And it will not succeed if someone adds an empty element after,.

 $(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 problem with html () is that if you add 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 2

General approach to solving the problem

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

Answer 3

Here is the fiddle for 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 you don't want and don't replace anything.

EDIT

This takes into account commas that are also scattered before and after formatting tags and only removes commas at the ends.

Answer 4

try it

 $(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 start all LIs, do the following:

 $(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>