ie jquery html() text(),jQuery text()函数在IE中丢失换行符

这是jQuery论坛上一个非常讨论的问题,但我无法找到适合我情况的解决方案.

我有一个无序列表,其中包含一些文本元素…用户可以通过jQuery创建新的列表项,这些项目将保存到SQL数据库中.他们还可以编辑现有的列表项.此外,由于每个列表项中的文本可能会很长,因此可以选择“隐藏”每个列表项,以便显示字符串的截断版本.这是由一个自定义的jQuery插件处理的,该插件截断了超过一定长度的列表项…这里是truncate插件格式化后每个列表项的样子:

This is the text that shows when this element is truncated ...

This is the text that will be hidden if the user clicks on the 'hide' button

我遇到的问题是用户单击“编辑”并使用“注释”类获取div的内容并将其分配给文本区域.然后,用户可以编辑文本并保存.我使用以下脚本来获取div的内容并将其分配给textarea:

$('.edit_note a').click(function(event){

// Get the parent li of the 'edit' link that was clicked

var parentLi = $(this).closest('li');

// fade out the li that's being edited

parentLi.fadeOut('fast');

// remove the '...' that shows when the note is truncated

parentLi.find('.truncate_ellipsis').remove();

// find the 'note' div within the li that's being edited

var currentNote = parentLi.find('.note');

// grab the id of this note... used when saving to the DB

var noteId = $(this).attr('id').substr(10);

// Set the current note id variable and editing status

currentNoteId = noteId;

currentNoteStatus = 'edit';

//add the note ID as a hidden field to the text editor form

$('input[name$="note_id"]').val(noteId);

// grab the text from this note and add it to the text area

// (textarea id is 'notes_content')

$('#notes_content').val($.trim(currentNote.text()); // this is the text area

// fade in the text area so the user can edit

$('div.notes_textarea').fadeIn();

});

一旦保存,我就会使用我在网上找到的功能将换行符转换为BR,然后将文本区域的内容分配回相应列表项中的“note”div:

function nl2br (str, is_xhtml) {

var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '
' : '
';

return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');

}

这一切在firefox / chrome / opera / safari中运行良好…但是,IE通过jQuery text()函数抓取文本时摆脱了换行符.这个在jQuery文档的本页评论中讨论:

有些人通过克隆源元素,将其包装在’pre’标签中,然后将其内容放入文本区域,取得了成功.这适用于换行符,但也带来了额外的空格,标签等等,看起来有点混乱.一个更好的解决方案似乎是使用html()jQuery函数来获取文本,然后将br替换为换行符,并删除任何其他html格式.

我是Javascript的新手,但是我对正则表达式很垃圾,所以我不知道如何做到这一点,而且我已经没时间了!我需要一个正则表达式,或者只需要一些字符串格式化帮助来执行以下操作:

>从字符串中删除所有span标记而不删除span的内容(我的truncate函数添加了一个带有“truncate_more”类的span …请参阅上面的html代码)

>删除br并将其替换为可在textarea元素中正确显示的换行符,并在浏览器中保持一致

或..如果有人知道这个IE / textarea / linebreak问题的更好的解决方法,我真的很感激白痴指导:)

关于什么可能是一个简单的解决方案的相当多的信息,但我想我会尽力解释这种情况!任何帮助将非常感谢….

编辑:’TheJuice下面的答案适用于br / IE换行问题(谢谢!),但我需要执行类似的正则表达式来摆脱跨度,因为它们只封装了一些文本.我尝试了以下,这似乎在Firefox中运行良好,但在IE中,跨度仍然存在:

var withBRs = currentNote.html();

var textWithBreaks = withBRs.replace(/\
/gi,'\r');

textWithBreaks = textWithBreaks.replace(/\<.>/g, '');

另一个编辑:’TheJuice’也解决了这个问题…忽略我可怕的正则表达式,如果你发现自己处于同样的境地,就去做他说的话!感谢所有提出建议的人……

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值