标签分类 技术文章:
当前位置:首页 > jQuery技术文章 > jquery实现去除重复字符串的方法小结

jquery实现去除重复字符串的实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:121

这篇文章主要知识点是关于jquery、去除重复、字符串、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery EasyUI开发指南
  • 类型:jQuery大小:48.4 MB格式:PDF出版:人民邮电出版社发行部作者:王波
立即下载

更多jQuery相关的学习资源可以参阅 jQuery电子书程序设计电子书 等栏目。

jquery实现去除重复字符串的方法小结

本文实例总结了jquery实现去除重复字符串的方法。分享给大家供大家参考,具体如下:

这里总结了三种去除重复字符串的方法:

把例子贴上,用jQuery方便些,首先要搭好环境,就是在同一目录下(同一文件夹下)保证有所使用的jquery1.8.1(如果是其他版本就在html代码中作相应改动)

第一:

<html>
<head>
<script src="jquery-1.8.1.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
 $('#delRepeat').click(function(){
  var str = $('#repeatValue').val();
   var strArr=str.split("");//把字符串分割成一个数组
   strArr.sort();//排序
   var result=new Array();//创建出一个结果数组
   var tempStr="";
   for(var i in strArr)
   {
     if(strArr[i] != tempStr)
     {
      result.push(strArr[i]);
      tempStr=strArr[i];
     }
     else
     {
      continue;
     }
   }
   $('#noRepeat').val(result.join(""))//把数组连成字符串并展示到页面
 })
})
</SCRIPT>
</head>
<body>
原值<input id="repeatValue" type="text" ><input id="delRepeat" type="button" value="去重">
<input type="text" id="noRepeat">
</body>
</html>

说明:通常就是把字符串分割成数组,再对数组操作,相对来说数组的方法多些,方便些,最后再join成字符串

关于sort()方法,之所以先对数组元素排序,就是因为可以把相同的字符归到一起,就不用再双层循环,要不然就得拿到每个元素,和剩余的逐个比对,这个sort会按照ASCII 字符顺序进行升序排列

第二:

<html>
<head>
<script src="jquery-1.8.1.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
 $('#delRepeat').click(function(){
  var str = $('#repeatValue').val();
   var strArr=str.split("");
   //排序
   strArr.sort();
    var result =$.unique(strArr);
   $('#noRepeat').val(result.join(""));
 })
})
</SCRIPT>
</head>
<body>
原值<input id="repeatValue" type="text" ><input id="delRepeat" type="button" value="去重">
<input type="text" id="noRepeat">
</body>
</html>

说明,这个unique方法确实方便,但有两个缺陷:

1、只对数组有效(直接字符串不行),并且该数组不能是数字数组,
2、只对相邻的重复元素有效,隔开的不行。

例如:[a,a,b,b,c,c]---unique----》[a,b,c]有效
[a,a,b,b,c,c,a]--unique-->[a,b,c,a]元素a仍然重复,无效

因此调用unique之前必须调用一下sort方法将其重复元素重排一下,挨在一起

但也因为调用了sort方法,顺序给重排了如:[b,b,c,c,a,a]---unique-->[a,b,c]不是[b,c,a]

第三:

<html>
<head>
<script src="jquery-1.8.1.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
 $('#delRepeat').click(function(){
  var str = $('#repeatValue').val();
     var reg = /(.)(?=.*\1)/g;//预搜索方式(有的叫断言)
     var result = str.replace(reg, "");
     $('#noRepeat').val(result);
 })
})
</SCRIPT>
</head>
<body>
原值<input id="repeatValue" type="text" value="aca" ><input id="delRepeat" type="button" value="去重">
<input type="text" id="noRepeat">
</body>
</html>

说明:

var reg =/(.)(?=.*\1)/g;
.匹配任意字符,但只能匹配任意字符中的一个
(.)加上()就是将匹配的该字符存储起来供以后引用
(?=)预搜索(也有叫断言的,也有叫预查的),指明某个字符的右侧是什么,但不包含这部分,只取这个‘某个字符'
如:p(?=ing)     匹配字符串ping时匹配成功,但匹配到的字符是p不是ping
(?=.*\1) 这个\1就是指的前面(.)的这个字符,之前说它被加上小括号就是被存储起来了,现在\1就是取存储的第一个(共一个)
*匹配次数,也有人称之为量词,指出现任意次
.*指出现任意次任意字符
(.)(?=.*\1)指第一个匹配字符,如果右侧出现的内容中包含该字符时就匹配上该字符
 g    指globle,全局匹配模式,匹配所有字符串

这个去重的结果其实是倒着来排序的,就是说重复字符出现在前面的都被置空了,是按一个字符从后往前出现的顺序排的

另:关于去重感兴趣的朋友还可以参考本站在线工具

在线去除重复项工具

更多关于jQuery相关内容可查看本站专题:《jQuery操作xml技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到jquery实现去除重复字符串、 jQuery实现点击旋转再点击、 jQuery联动日历的实例代码、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:JQuery循环滚动文字图片实例代码

下一篇:jQuery zepto.js简单实现tab切换的代码

展开 +

收起 -

学习笔记
网友NO.501550

JQuery中解决重复动画的方法

下面我们就来总结一下几个JQuery中解决重复动画的办法 ,这里有几个常见的动画效果,它们分别是:图片滚动轮播,回到页面顶部,联级菜单滑出,手风琴。 图片滚动: $("#banner-min-img1").mouseover(function (){$("#banner-img").animate({left:"0px"},300)}$("#banner-min-img2").mouseover(function (){ $("#banner-img").animate({left:"-1041px"},300)}$("#banner-min-img3").mouseover(function (){$("#banner-img").animate({left:"-1990px"},300)} 回到页面顶部: $("#goBackTop").click(function (){$("html,body").animate({scrollTop:0},1000)} 在实际操作中我们会发现,代码是非常简单的,就那么2、3行,但是其中的队列控制也让人不忍直视: 回到页面顶部,如果你连续点击回到页面顶部多次,那么短时间内你就再也没办法用滚动条了; 滚动轮播,你指向100次,他就会滚100次才停止!完全不顾及你的感受! 那么如何来解决呢?其实jquery内置了2种方法,一种是stop,一种是在对象后面加上is(:animated),推荐使用后面一种,用上之后,腰也不酸了,动画也听话了;代码 回到顶部,代码如下: $("#goBackTop").click(function (){ if(!$("html,body").is(":animated")) {$("html,body").animate({scrollTop:0},1000)}}) 最后奉上 最简洁的 手风琴代码,只有2行: CSS: meta charset="utf-8" style .wrap{ width: 400px; min-height: 550px!important; background: #000; display: block!importa……

网友NO.826855

jquery删除数组中重复元素

话不多说,下面就跟着小编来看下利用jquery实现删除数组中重复元素的具体思路吧 首先 定义 如下 数组 : var arr=[0,2,3,5,6,9,2]; 我们可以看到数组中存在重复元素'2'; 最后通过jquery筛选应该得到[0,2,3,5,6,9]; ok,首先我们再定义一个空数组,用来存放最后筛选出来的元素: var new_arr=[]; 利用jquery的$.inArray可以轻松实现: 遍历数组元素: for(var i=0;iarr.length;i++) { var items=arr[i]; //判断元素是否存在于new_arr中,如果不存在则插入到new_arr的最后 if($.inArray(items,new_arr)==-1) { new_arr.push(items); }} 当遍历到最后一个'2'的时候,因为已经将之前一个'2'插入到了new_arr中,所以最后一个'2'不会执行if中的语句 最后得到新数组 new_arr=[0,2,3,5,6,9]; 备注: $.inarray(value,array) --确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。 最终代码如下: var arr=[0,2,3,5,6,9,2];var new_arr=[];for(var i=0;iarr.length;i++) { var items=arr[i]; //判断元素是否存在于new_arr中,如果不存在则插入到new_arr的最后 if($.inArray(items,new_arr)==-1) { new_arr.push(items); }}console.log(new_arr); //[0,2,3,5,6,9] 以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持码农之家! ……

网友NO.437472

jquery 验证用户名是否重复代码实例

本文实例为大家分享了jquery验证用户名是否重复的具体代码,供大家参考,具体内容如下 $("#form-admin-add").validate({rules:{userName:{required:true,minlength:2,maxlength:16,remote: { type: "post", url: "/checkUserName.html", data: { userName: function() { return $("#userName").val(); } }, dataType: "html", dataFilter: function(data, type) { var data=JSON.parse(data) if (data.status ==400) return false; else return true; } }},password:{required:true,},password2:{required:true,equalTo: "#password"},sex:{required:true,},phone:{required:true,isPhone:true,},email:{required:true,email:true,},roleId:{required:true,},},success: function(label) { //正确时的样式 label.text(" ").addClass("success"); }, messages: { userName: { required: "请输入用户名,3-16个字符(字母、数字、下划线),注册后不能更改", minlength: "用户名长度不能小于3个字符", maxlength: "用户名长度不能大于16个字符", remote: "用户名不可用" } },onkeyup:false,focusCleanup:true,success:"valid"}); 以上所述是小编给大家介绍的jquery验证用户名是否重复详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持! ……

网友NO.795819

jquery如何判断表格同一列不同行input数据是否重复

function hasRepeat(objId,columnIndex){ var arr = []; $("#"+objId+" tbody tr").each(function(){ arr.push( $("td:eq("+columnIndex+")",this).text() ); }); if( arr.length==$.unique( arr ).length ){ return false; }else{ return true; } } //调用 alert( hasRepeat(tableID,列索引)==1?"有重复":"无重复" ); ……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明