javascript从数组

Question

我尝试为ToolTip创建系统替换。

我已经创建了一个版本，但它不是最优的（搜索更好的方法）

这是一个小提琴：http://jsfiddle.net/forX/Lwgrug24/

我创建了一个字典（array [key] - ＆gt; value）。数组按键的长度排序。

每个键都是一个单词或一个表达式，该值是表达式的定义。

所以，我用span替换表达式（可能/应该是div）。跨度用于工具提示（我使用数据标题作为工具提示文本）。

因为某些单词在表达中被重用，我需要用工具提示删除表达式（在现实生活中想到父/祖父，你不想在爷爷里面定义父亲）。为了替换我使用ramdom值。这是这段代码中最糟糕的。

您可以发表评论或发布新方法。也许有人已经做过了。

澄清：

我认为通过使用字符串替换我的方法是错误的。或者它可能更安全。我该怎么办？

html：

<div class="container">
    one two three four five six seven eight nine ten
</div>

javascript：

    $(function() {  
     var list = [
    {'k':'one two three four five','v':'First five number.'},
    {'k':'four five six seven','v':'middle number.'},
    {'k':'six seven eight','v':'second middle number.'},
    {'k':'two','v':'number two.'},
    {'k':'six','v':'number six.'},
    {'k':'ten','v':'number ten.'}
];     

$(".container").each(function(){

    var replacement = new Array();

    for (i = 0; i < list.length; i++) {

        var val = list[i];                  

        var rString = randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');           

        replacement[rString + "_k"] = htmlEncode(val["k"]);                
        replacement[rString + "_v"] = htmlEncode(val["v"]);

        var re = new RegExp("(" + val["k"] + ")","g");

        $(":contains('" + val["k"] + "')",$(this).parent()).html(function(_, html) {

            var newItem = '<span class="itemWithDescription" '
                + 'data-title="' + rString + "_v" + '">' 
                + rString + "_k"
                + '</span>';

           return  html.replace(re, newItem);
        });         
    }

    for (var k in replacement){ 
        $(this).html($(this).html().replace(k,replacement[k]));
        console.log("Key is " + k + ", value is : " + replacement[k]);
    }       
});


 $(document).tooltip({
    items:'.itemWithDescription',
    tooltipClass:'Tip',
    content: function(){
        var title = $(this).attr("data-title");
        if (title == ""){
            title = $(this).attr("title");  //custom tooltips
        }
        return title;
    }


});


 });

function randomString(length, chars) {
    var result = '';
    for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
    return result;
}

function htmlEncode(value){
    //create a in-memory div, set it's inner text(which jQuery automatically encodes)
    //then grab the encoded contents back out.  The div never exists on the page.
    return $('<div/>').text(value).html();
}

我添加了一点东西。关于随机函数，我放了一个|并且}对于每个字符，它更大，但没有太多机会与表达式冲突。

  for (var i = length; i > 0; --i) result += '|' + ( chars[Math.round(Math.random() * (chars.length - 1))] ) + '}' ;

http://jsfiddle.net/forX/Lwgrug24/3/