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>