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

这可能不是最简洁的方法，但它适用于您的测试用例。可能需要对文本运行 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>