如何修改此脚本以根据ID使用不同的替换阵列?

时间:2012-10-11 20:12:03

标签: javascript jquery

我在下面有这个脚本。我想要做的是修改它,以便它使用一组不同的替换值,具体取决于document.getElementById('something')是什么。

所以('标题')会使用('Body')等不同的替换字符集。

提前致谢

function DeGlyph(element) {
// List of replacement rules. 
     replacements= [
        //Single Quote Characters
        ['\u0027', '\''],
        ['\u2018', '\''],
        ['\u2019', '\''],
        ['\u201A', '\''],
        ['\u201B', '\''],
        //Double Quote Characters
        ['\u0022', '"'],
        ['\u201C', '"'],
        ['\u201D', '"'],
        ['\u201E', '"'],
        ['\u201F', '"'],
        ['\u301D', '"'],
        ['\u301E', '"'],
        ['\u301F', '"'],
        //Other Characters      
        ['\u00BC', '1/4'],
        ['\u00BD', '1/2'],
        ['\u00BE', '3/4'],
        ['\u2122', '<sup>TM</sup>'],        
        ['\u2013', '-'],
        ['\u2014', '&mdash;'],
        ['\u00A9', '&copy;'],
        ['\u00AE', '&reg;']         


    ];


// Only attempt to use replacer behaviour if we can retain the cursor
// position. Setting value by default moves the cursor to the end of the
// input, which is too irritating.
//
    if (getInputSelection(element)!==null) {
        element.onkeyup= function() {
            value= element.value;
            for (var i= 0; i<replacements.length; i++) {
                value= value.split(replacements[i][0]).join(replacements[i][1]);
            }
            if (value!=element.value) {
                var s= getInputSelection(element);
                element.value= value;
                setInputSelection(element, s);
            }
        };
    }
}

// Cross-browser (as much as possible anyway) cursor positioning
//
function getInputSelection(element) {
    if (element.selectionStart!==window.undefined) {
        return [element.selectionStart, element.selectionEnd];
    } else if (document.selection) {
        var BIG= 1000000;
        var range= document.selection.createRange();
        if (range.moveStart===window.undefined)
            return [0, 0];
        var start= -range.moveStart('character', -BIG);
        var end= -range.moveEnd('character', -BIG);
        return [start-1, end-1];
    } else return null;
}
function setInputSelection(element, s) {
    if (element.selectionStart!==window.undefined) {
        element.selectionStart= s[0];
        element.selectionEnd= s[1];
    } else if (document.selection) {
        var range= element.createTextRange();
        range.collapse(true);
        range.moveEnd('character', s[1]);
        range.moveStart('character', s[0]);
        range.select();
    }
}

new DeGlyph(document.getElementById('Headline')); 
new DeGlyph(document.getElementById('Body')); 

1 个答案:

答案 0 :(得分:0)

嗯,这有些'有趣' - 就像克里斯说的那样,只是把你想要使用的替换阵列的功能扔掉,而不是硬编码。

这是一个简单的问题 (a)稍微改变查询表的格式 (b)改变DeGlyph的函数sig以包括替换数组 (c)添加一个计算要传递给DeGlyph的变量的函数。

尝试使用大小(是否需要选择输入中的文本,除了丢失然后重新关注浏览器窗口以更新?我认为它不起作用,直到我选择原始文本然后做alt-在浏览器和另一个程序之间来回切换)

<!DOCTYPE html>
<html>
<head>
<script>

var mArray = 
    [
        {
                     forId : 'headline', 
            replacements : [
                                //Single Quote Characters
                                ['\u0027', '\''],
                                ['\u2018', '\''],
                                ['\u2019', '\''],
                                ['\u201A', '\''],
                                ['\u201B', '\'']
                            ]
        },


        { 
                     forId : 'body',
            replacements : [
                                ['\u0022', '"'],
                                ['\u201C', '"'],
                                ['\u201D', '"'],
                                ['\u201E', '"'],
                                ['\u201F', '"'],
                                ['\u301D', '"'],
                                ['\u301E', '"'],
                                ['\u301F', '"']
                            ]
        },

        { 
                     forId : 'mTest',
            replacements : [
                                ['1', 'one'],
                                ['2', 'two'],
                                ['3', 'three'],
                                ['4', 'four'],
                                ['5', 'five']
                            ]
        }
    ];




function mDeGlyph(idStr, mDataBank)
{
    var element = document.getElementById(idStr);
    if (element == null)
    {
        alert('no element with that id="'+idStr+'" found');
        return;
    }
    var i, n = mDataBank.length, replacements, found=false;
    for (i=0; i<n; i++)
    {
        if (mDataBank[i].forId == idStr)
        {
            replacements = mDataBank[i].replacements;
            found = true;
            break;
        }
    }
    if (found == true)
    {
        DeGlyph(element, replacements);
    }
    else
        alert("no apparent entry for that id-string");
}


function DeGlyph(element, replacements) 
{
// Only attempt to use replacer behaviour if we can retain the cursor
// position. Setting value by default moves the cursor to the end of the
// input, which is too irritating.
//
    if (getInputSelection(element)!==null) {
        element.onkeyup= function() {
            value= element.value;
            for (var i= 0; i<replacements.length; i++) {
                value= value.split(replacements[i][0]).join(replacements[i][1]);
            }
            if (value!=element.value) {
                var s= getInputSelection(element);
                element.value= value;
                setInputSelection(element, s);
            }
        };
    }
}

// Cross-browser (as much as possible anyway) cursor positioning
//
function getInputSelection(element) {
    if (element.selectionStart!==window.undefined) {
        return [element.selectionStart, element.selectionEnd];
    } else if (document.selection) {
        var BIG= 1000000;
        var range= document.selection.createRange();
        if (range.moveStart===window.undefined)
            return [0, 0];
        var start= -range.moveStart('character', -BIG);
        var end= -range.moveEnd('character', -BIG);
        return [start-1, end-1];
    } else return null;
}
function setInputSelection(element, s) {
    if (element.selectionStart!==window.undefined) {
        element.selectionStart= s[0];
        element.selectionEnd= s[1];
    } else if (document.selection) {
        var range= element.createTextRange();
        range.collapse(true);
        range.moveEnd('character', s[1]);
        range.moveStart('character', s[0]);
        range.select();
    }
}

// just displays the list of repoklacements that we have for assorted ids.
function mInit()
{

//  mDeGlyph('Headline');
//  mDeGlyph('Body');
    mDeGlyph('mTest', mArray);
}


</script>
<style>

</style>
</head>
<body onload='mInit();'>
    <input id='mTest' value='1 3 5' />
</body>
</html>