Front-end

JavaScript: HTML 字符串折叠 (Html String Ellipsis)

2018 年马上就要过去了,这一年真的经历了太多,本应该按惯例写写年终总结的,不过最近真的太忙了,总有些事情是更优先的,又赶上今天有人需要帮忙,索性就把解决这个小问题的代码讲一讲,全当作是对 2018 年的一个告别吧。

其实很久以前,在某个项目中也遇到过这个问题,我们在一个前端 Table (Grid) 中,希望显示出一个包含了 HTML 样式的富文本内容列,但是其内容很长,我们希望可以按照一个指定的字数进行截取(需要继续保留富文本的样式),并将字符串的剩余部分显示为 …

我们知道,通过 CSS ellipsis 也能设置 … 样式,但是这只能按照外围容器的 width 进行设定,无法按照字数进行处理。所以,为了庆祝新年,我们自己动手写一个吧!

Continue reading

如何将 .NET DateTime 转换为 JavaScript Date – 形如:\/Date(1539953962642)\/

前言

在使用 ASP.NET MVC 开发 Web 程序时,对于 DateTime 类型的数据在 JSON 结果中,以类似于 “\/Date(1539953962642)\/” 的形式进行返回,那么这里中格式叫做什么呢?其中的数字的意义如何?

实际上这种数据格式叫做 Microsoft’s built-in JSON Date format,这不是任何一个通用规范的一部分,它是微软定义的一种格式。并且这里的数字并不是 .NET DateTime 的 Ticks!实际上这个值就是 TimeInMillis!


Ticks 和 TimeInMillis 有什么区别?

Ticks 一般是指从 0001-01-01 00:00:00.000 到现在的百纳秒计数,这个计数单位是 100 nanosecond(long 类型存储),.NET 平台使用 Ticks 方式记录时间(比如 [C#] DateTime.UtcNow.Ticks)。

TimeInMillis 一般是指从 1970-01-01 00:00:00.000 到现在的毫秒数,这个单位是 1 millisecond(long 类型存储),Java 和 JavaScript 使用 TimeInMillis 方式记录时间(比如 [JavaScript] Date.now())

所以,我们只需要通过正则表达式提取这个 Microsoft’s built-in JSON Date format 的值,直接应用于 JavaScript 即可。
Continue reading

JavaScript: 注册粘贴事件,将剪切板中的内容去除HTML标签,并粘贴到光标位置

$("#Subject").bind('paste', function (e) {
        var pasteData = "";
        if (e.originalEvent.clipboardData) {
            pasteData = e.originalEvent.clipboardData.getData('text');
        } else {
            // for IE
            pasteData = window.clipboardData.getData("Text");
        }
        var self = this;

        // 在等待一段时间后,在当前光标位置,粘贴处理后的文本
        setTimeout(function () {
            var selection = document.getSelection();
            var cursorPos = selection.anchorOffset;
            var oldContent = selection.anchorNode.nodeValue;
        // 通过 Jquery的text() 去除所有样式
            var toInsert = $("<div>" + pasteData + "</div>").text();
            var newContent = oldContent.substring(0, cursorPos) + toInsert + oldContent.substring(cursorPos);
            selection.anchorNode.nodeValue = newContent;            
        }, 200);
        return false;
    });