Javascript 选择字符串中的特定字符，并使用Jquery（直观地）偏移它

我正试图使用Jquery/Javascript来模拟一个坏掉的打字机字体（因为我找不到）。但我想随机决定哪个字母会被弄坏。我能够拆分我想要的id的字符串，并使用我找到的一些代码来获得一个介于0和字符串总长度之间的随机数。我现在遇到的问题是，如何处理这个特殊的角色。我想向下或向上推几个像素。我试图给它一个类，以便我可以添加一些空白或填充，但它不起作用。所以我被困在现在的位置

这是页面，我正在尝试对“关于”这个词进行修改：

以下是脚本：

<script type="text/javascript">

        function randomXToY(minVal,maxVal,floatVal)
            {
              var randVal = minVal+(Math.random()*(maxVal-minVal));
              return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
            }


        var str = $('#typehead').text();
                var strcnt = str.length;
        var exploded = str.split('');
        var rdmltr =randomXToY(0,strcnt); 
        var theLetter = exploded[rdmltr];
        theLetter.addClass("newClass");
        var toffset = $('.newClass').offset();
        alert(toffset.left + "," + toffset.top);

     </script>

函数randomXToY（minVal、maxVal、floatVal）
{
var randVal=minVal+（Math.random（）*（maxVal-minVal））；
返回类型floatVal=='undefined'？Math.round（randVal）：randVal.toFixed（floatVal）；
}
var str=$（'#typehead'）.text（）；
var strcnt=str.length；
变量分解=str.split（“”）；
var rdmltr=随机变量（0，strcnt）；
var TheLitter=爆炸[rdmltr]；
添加类（“新类”）；
var toffset=$（'.newClass'）.offset（）；
警报（toffset.left+“，”+toffset.top）；

编辑：更新以确保匹配的字符不是空格字符，并添加了@abelito建议的一点样式

这个怎么样：

函数randomXToY（minVal、maxVal、floatVal）{
var randVal=minVal+（Math.random（）*（maxVal-minVal））；
返回类型floatVal=='undefined'？Math.round（randVal）：randVal.toFixed（floatVal）；
}
var exploded=$（'#typehead'）.text（）.split（''）；
var rdmltr=randomXToY（0，分解长度）；
//确保没有空格字符
while（分解[rdmltr]=''）{
rdmltr=randomXToY（0，分解长度）；
}
//用带有newClass的跨距将字母包装起来
//并在数组中更新它
分解的[rdmltr]=''+分解的[rdmltr]+''；
//更新内容
$（'#typehead'）.html（分解的.join（''）；
var toffset=$（'.newClass'）.offset（）；
警报（toffset.left+“，”+toffset.top）；​

---

更新：如果您想将其应用于多个方面：

我喜欢帕特里克的答案，但作为替代方案，我会在全文中更改相同的字母。也许还可以稍微旋转一下（尽管这在IE中不起作用）。我用帕特里克的叉子做的

CSS

代码

函数随机字母（带大小写）{
//大小写=大写为true，小写为false
风险值基数=（案例）？65:97；
//将HTML转义码转换为字母
var rand=$（'&#'+parseInt（base+（Math.random（）*25），10）+'；'）；
返回rand.text（）；
};
$（文档）.ready（函数（）{
var ltr=随机字母（假）；
var reg=新的RegExp（ltr，'g'）；
$（'#typehead'）.html（函数（i，html）{
返回html.replace（reg，“+ltr+”）；
});
});

---

更新：这是应用于多个h1标记（）所需的代码：

函数randomXToY（minVal、maxVal、floatVal）{
var randVal=minVal+（Math.random（）*（maxVal-minVal））；
返回类型floatVal=='undefined'？Math.round（randVal）：randVal.toFixed（floatVal）；
}
$（'.typehead'）。每个（函数（）{
//使用id打印头访问标签中的文本和字符
变量分解=$（this）.text（）.split（“”）；
var rdmltr=randomXToY（0，分解长度）；
//确保没有空格字符或未定义的字符
while（分解的[rdmltr]=''| |分解的[rdmltr]==未定义）{
rdmltr=randomXToY（0，分解长度）；
}
//用带有新类brokenType的跨距将字母包装起来
//并在数组中更新它
分解的[rdmltr]=''+分解的[rdmltr]+''；
//更新内容
$（this.html（分解的.join（“”））；
});

非常简单，非常好@OP：位置：相对；顶部：-1px；在CSS@abelito-谢谢。这是一个新版本，它添加了一些您建议的样式，还确保了字符匹配不是空格字符。我认为一封未对齐的打字机信函会影响整个文件中的同一封信函，而不是随机信函。此外，我还将在抵销信中添加一个轻微的旋转（使用CSS3，IE做不到也无所谓）。旋转很好，我在脑海中想象了这一点，但决定一次处理一个效果。我喜欢这个想法，但文档中的文本不会是打字机一样的字体，只有标题标签会是，很可能只是h1标签。但是谢谢你的代码！没问题！顺便说一句，我发现代码有一个问题（使用25而不是26），还有一个更好的方法可以在这里获得一个随机字母：结果是我还没有完成。我只在1个标记上测试了代码（将id更改为类）。但它不能在同一类型的多个标记/类上正常工作。我尝试了一个.each（）jquery循环，但没有任何效果。我仍然想在h1标签中保留1个随机字母，但是在所有h1标签中。请看我的问题：www.franciscog.com/bs/zine.php，我想我需要它做的基本上是从上到下扫描页面，如果找到每个h1标记，在遇到它时在每个h1上分别运行该函数。我无法让该url工作（404错误），但在看过你的网站后，我认为添加鼠标滚轮功能来水平滚动你的内容会很好：P。。。看看这个答案：哦！我忘了一封信，是齐恩，不是齐恩。现在应该可以了：www.franciscog.com/bs/zines.php注意它是如何重复“Zinesh1测试”的，这只是两个h1标记，一个放在链接上方（“zines”），另一个放在“h1测试”下方。但是我现在使用的代码将它们结合起来。谢谢你的滑码，前几天我还在找类似的东西。

function randomXToY(minVal,maxVal,floatVal){
    var randVal = minVal+(Math.random()*(maxVal-minVal));
    return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}


var exploded = $('#typehead').text().split('');
var rdmltr = randomXToY(0,exploded.length);

    // Make sure we don't get a space character
while(exploded[rdmltr] == ' ') {
    rdmltr = randomXToY(0,exploded.length);
}
    // Wrap the letter with a span that has the newClass
    //   and update it in the array
exploded[rdmltr] = '<span class="newClass">' + exploded[rdmltr] + '</span>';

    // Update the content
$('#typehead').html(exploded.join(''));
var toffset = $('.newClass').offset();
alert(toffset.left + "," + toffset.top);​

.newClass {
 left: 0px;
 top: -1px;
 color: red;
 position:relative;
 -webkit-transform: rotate(-5deg); 
 -moz-transform: rotate(-5deg); 
}

function randomLetter(cased){
 // case = true for uppercase, false for lowercase
 var base = (cased) ? 65 : 97;
 // convert HTML escape code into a letter
 var rand = $('<span>&#' + parseInt(base+(Math.random()*25),10) + ';</span>');
 return rand.text();
};

$(document).ready(function(){
 var ltr = randomLetter(false);
 var reg = new RegExp( ltr, 'g');
 $('#typehead').html(function(i,html){
  return html.replace(reg, '<span class="newClass">' + ltr + '</span>');
 });
});

function randomXToY(minVal,maxVal,floatVal){
 var randVal = minVal+(Math.random()*(maxVal-minVal));
 return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}

$('.typehead').each(function() {                  
 //access the text and characters within the tag with the id typehead 
 var exploded = $(this).text().split('');
 var rdmltr = randomXToY(0,exploded.length);

 // Make sure we don't get a space character or undefined
 while(exploded[rdmltr] == ' ' || exploded[rdmltr] == undefined) {
  rdmltr = randomXToY(0,exploded.length);
 }

 // Wrap the letter with a span that has the new class brokenType
 //   and update it in the array
 exploded[rdmltr] = '<span class="brokenType">' + exploded[rdmltr] + '</span>'; 

 // Update the content
 $(this).html(exploded.join(''));
});