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方法以删除空格。如果有人在,之后添加了一个空元素，那么会失败。

＆＃13;

$(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());
            }
        });    
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

$(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
            }
        });
    });
});

＆＃13;

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

＆＃13;

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>

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

4 个答案: