- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是 jQuery 论坛上经常讨论的问题,但我无法找到适合我情况的解决方案。
我有一个无序列表,其中包含一些文本元素...用户可以通过 jQuery 创建新的列表项,并将其保存到 SQL 数据库中。他们还可以编辑现有的列表项。此外,由于每个列表项中的文本可能会变得很长,因此他们可以选择“隐藏”每个列表项,以便显示字符串的截断版本。这是由一个自定义 jQuery 插件处理的,该插件会截断超过一定长度的列表项...这是截断插件格式化后每个列表项的外观:
<li id="item_1">
<div class="note">
This is the text that shows when this element is truncated <span style="display: none;" class="truncate_ellipsis">...</span>
<span style="display: inline;" class="truncate_more">This is the text that will be hidden if the user clicks on the 'hide' button</span>
</div>
<div class="toggle_wrapper">
<div class="note_toggle">
<a href="#" class="truncate_more_link">Hide note</a>
</div>
<div style="display: block;" class="note_controls">
<span class="edit_note"><a href="#note_textfield" id="edit_note_1">Edit</a></span> | <span class="delete_note"><a href="#" id="delete_note_1">Delete</a></span>
</div>
</div>
</li>
我遇到的问题是,用户单击“编辑”,它会获取带有“note”类的 div 的内容并将其分配给文本区域。然后用户可以编辑文本并保存。我使用以下脚本来获取 div 的内容并将其分配给文本区域:
$('.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') ? '<br />' : '<br>';
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 并将其替换为换行符,这些换行符将在文本区域元素中正确显示并在浏览器中保持一致
或者..如果有人知道解决此 IE/textarea/linebreak 问题的更好方法,我真的很感激白痴指南:)
相当多的信息可能是一个简单的解决方案,但我想我会尽力解释这种情况!任何帮助将不胜感激......
编辑:'TheJuice 下面的答案适用于 br 的/IE 换行问题(谢谢!),但我需要执行类似的正则表达式来消除跨度,因为它们只封装一些文字。我尝试了以下方法,在 Firefox 中似乎工作正常,但在 IE 中跨度仍然存在:
var withBRs = currentNote.html();
var textWithBreaks = withBRs.replace(/\<br\>/gi,'\r');
textWithBreaks = textWithBreaks.replace(/\<.*span.*\>/g, '');
另一个编辑:“TheJuice”也解决了这个问题...忽略我可怕的正则表达式,如果你发现自己处于同样的情况,就按照他说的做!感谢所有提出建议的人...
最佳答案
这里有一个更简单的解决方案,可以根据 <br>
将任何 HTML 转换为带有换行符的纯文本。或<p>
标签。
function htmlDecodeWithLineBreaks(html) {
var breakToken = '_______break_______',
lineBreakedHtml = html.replace(/<br\s?\/?>/gi, breakToken).replace(/<p\.*?>(.*?)<\/p>/gi, breakToken + '$1' + breakToken);
return $('<div>').html(lineBreakedHtml).text().replace(new RegExp(breakToken, 'g'), '\n');
}
例如调用以下方法:
htmlDecodeWithLineBreaks('line 1<br>line & 2<br />' +
'line > 3<p>paragraph 1</p>line 4')
返回:
line 1
line & 2
line > 3
paragraph 1
line 4
希望有帮助;)
关于jQuery text() 函数在 IE 中丢失换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4502673/
在带有 jQuery 的 CoffeeScript 中,以下语句有什么区别吗? jQuery ($) -> jQuery -> $ - > 最佳答案 第一个与其他两个不同,就像在纯 JavaScr
已关闭。这个问题是 off-topic 。目前不接受答案。 想要改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 已关闭13 年前。 Improve th
就目前情况而言,这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放,visit
这个问题可能听起来很愚蠢,但请耐心等待,因为我完全是初学者。我下载了两个 jQuery 版本,开发版本和生产版本。我想知道作为学习 jQuery 的初学者,什么更适合我。 最佳答案 如果您对 jQue
The documentation说要使用 1.6.4,但我们现在已经升级到 1.7.2。 我可以在 jQuery Mobile 中使用最新版本的 jQuery 吗? 最佳答案 您当然可以,但如果您想
我在这里看到这个不错的 jquery 插件:prettyphoto jquery lightbox有没有办法只用一个简单的jquery来实现这样的效果。 我只需要弹出和内联内容。你的回复有很大帮助。
很明显我正在尝试做一些 jQuery 不喜欢的事情。 我正在使用 javascript 上传图片。每次上传图片时,我都希望它可见,并附加一个有效的删除脚本。显示工作正常,删除则不然,因为当我用 fir
这两个哪个是正确的? jQuery('someclass').click(function() { alert("I've been clicked!"); }); 或 jQuery('somec
我正在寻找一个具有以下格式的插件 if (jQuery)(function ($) { -- plugin code -- })(jQuery); 我明白 (function ($)
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭10 年前。 Improv
我知道这个问题已经被问过几次了,但想知道您是否可以帮助我解决这个问题。 背景:我尝试创建一个使用 Ajax 提交的表单(jQuery 表单提交)。我已经工作得很好,然后我想在表单上得到验证。我可以使用
我正在使用无处不在的jquery validate plugin用于表单验证。它支持使用metadata plugin用于向表单元素添加验证规则。 我正在使用此功能。当验证查找这些规则时,它会对元素进
我更喜欢为我一直在开发的网络社区添加实用的视觉效果,但随着事情开始堆积,我担心加载时间。 拥有用户真的更快吗加载(希望是缓存的)副本来自 Google 存储库的 jquery? 是否使用 jQuery
这个问题已经有答案了: Slide right to left? (17 个回答) 已关闭 9 年前。 你能告诉我有没有办法在 jQuery 中左右滑动而不使用 jQuery UI 和 jQuery
我如何找出最适合某种情况的方法?任何人都可以提供一些示例来了解功能和性能方面的差异吗? 最佳答案 XMLHttpRequest 是原始浏览器对象,jQuery 将其包装成一种更有用和简化的形式以及跨浏
运行时 php bin/console oro:assets:build ,我有 11 个这样的错误: ERROR in ../node_modules/jquery-form/src/jquery.
我试图找到 jQuery.ajax() 在源代码中的定义位置。但是,使用 grep 似乎不起作用。 在哪里? 谢谢。 > grep jQuery.ajax src/* src/ajax.js:// B
$.fn.sortByDepth = function() { var ar = []; var result = $([]); $(this).each(function()
我的页面上有多个图像。为了检测损坏的图像,我使用了在 SO 上找到的这个。 $('.imgRot').one('error',function(){ $(this).attr('src','b
我在理解 $ 符号作为 jQuery 函数的别名时遇到了一些麻烦,尤其是在插件中。你能解释一下 jQuery 如何实现这种别名:它如何定义 '$' 作为 jQuery 函数的别名?这是第一个问题。 其
我是一名优秀的程序员,十分优秀!