Jquery - 从HTML中删除一个字符但保持html标记不变

Question

我正在尝试构建一个简单的CMS，用户可以在contenteditable div中编写任何内容。 当他们保存他们的工作时，我想从他们推出的文本中删除特定字符，即：

案文是：

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

我知道如何用jquery .text（）删除逗号，但它只给了我一个没有HTML标签的纯文本。 问题是我不知道在应删除逗号的句子末尾是否有多少HTML标记。

有没有其他方法可以删除此逗号而不触及HTML标记？ 因此，在保存工作后，文本将保持原样，但在LI元素的末尾没有逗号？

简单的小提琴： jsfiddle

Answer 1

解决问题的一般方法

• 获取.text（），检查最后一个字符是否为逗号
• 如果是，请使用lastindexof从.html()删除最后一个逗号
• 将此字符串应用于元素

Answer 2

这可能不是最干净的方法，但它适用于您的测试用例。 可能希望在文本上运行rtrim方法以删除空格。 如果有人加入后的空元素，并会失败, 。

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

或者你可以这样做。 html（）方式的问题是如果你将事件处理程序添加到里面的任何元素，它们将被销毁。

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

这是一个工作示例的小提琴：

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>');
        });    
    });
});

基本上，使用正则表达式删除任何您不想要的字符，并替换它们。

编辑

这会考虑在格式化标记之前和之后分散的逗号，并且只删除末尾的逗号。

Answer 4

试试这个

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

要遍历所有LI，请执行以下操作：

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