Question

我有一个包含转义的Unicode字符的页面。（例如汉字字符转义为\ u6F22 \ u5B57）。 This page shows how you can use the unescape() method to convert the escaped \u6F22\u5B57 to 漢字.我有一个转换所有Unicode转义字符的方法，但速度不是很快。

function DecodeAllUnicodeCharacters (strID)
{
    var strstr = $(strID).innerHTML;
    var arrEncodeChars = strstr.match(/\\u[0-9A-Z]{4,6}/g);
    for (var ii = 0; ii < arrEncodeChars.length; ii++) {
        var sUnescaped = eval("unescape('"+arrEncodeChars[ii]+"')");
        strstr = strstr.replace(arrEncodeChars[ii], sUnescaped);
    }
    $(strID).innerHTML = strstr;
}

需要花费最长时间的部分是在这里设置innerHTML：$（strID）.innerHTML = strstr; 有没有一种很好的方法来替换字符而不重做整个页面的innerHTML？

Answer 1

设置innerHTML的速度很慢的原因是因为它导致浏览器将其解析为HTML，如果存在子元素，则会重新创建它们，这是非常慢的。相反，我们需要找到text nodes，如果它们包含转义内容，则有选择地对其进行处理。我将以下内容基于a previous question，并演示了in a fiddle。

Element.addMethods({
    // element is Prototype-extended HTMLElement
    // nodeType is a Node.* constant
    // callback is a function where first argument is a Node
    forEachDescendant: function (element, nodeType, callback)
    {
        element = $(element);
        if (!element) return;
        var node = element.firstChild;
        while (node != null) {
            if (node.nodeType == nodeType) {
                callback(node);
            }

            if(node.hasChildNodes()) {
                node = node.firstChild;
            }
            else {
                while(node.nextSibling == null && node.parentNode != element) {
                    node = node.parentNode;
                }
                node = node.nextSibling;
            }
        }
    },
    decodeUnicode: function (element)
    {
        var regex = /\\u([0-9A-Z]{4,6})/g;
        Element.forEachDescendant(element, Node.TEXT_NODE, function(node) {
            // regex.test fails faster than regex.exec for non-matching nodes
            if (regex.test(node.data)) {
                // only update when necessary
                node.data = node.data.replace(regex, function(_, code) {
                    // code is hexidecimal captured from regex
                    return String.fromCharCode(parseInt(code, 16));
                });
            }
        });
    }
});

除了美学之外，element.addMethods的好处是功能模式。您可以使用decodeUnicode几种方式：

// single element
$('element_id').decodeUnicode();
// or
Element.decodeUnicode('element_id');

// multiple elements
$$('p').each(Element.decodeUnicode);
// or
$$('p').invoke('decodeUnicode');

Answer 2

这是你想要的吗？

function DecodeAllUnicodeCharacters(id) {
    $(id).innerHTML = decodeURI($(id).innerHTML);
}

更有效地替换页面上的转义unicode字符？

2 个答案: