Javascript:数组和字符串的相互转化
中午吃饭的时候,和室友讨论前端的问题,然后一个有趣的问题被抛出来:
javascript用什么方法可以把“hello world”位置反转输出,即输出:"dlrow olleh"?
听到这个问题,我的思路就是要把这个字符串分割成数组,因为数组里面有个常用的函数reverve()可以很好的实现反转效果,然后将分割成的数组拼接起来就ok啦;
背景知识:
1# split() 方法
将字符串分割为字符串数组,并返回此数组;
之前的总结:http://www.cnblogs.com/kevinCoder/p/4554960.html
Demo:

2# join() 方法
2.1:定义和用法
join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。
2.2:语法
arrayObject.join(separator)
separator:可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。 返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入separator 字符串而生成的。
Demo:

3# reverse() 方法
reverse() 方法用于颠倒数组中元素的顺序。
语法arrayObject.reverse(),该方法会改变原来的数组,而不会创建新的数组。

===========开始干活=============

===========高亮显示关键字=============

通过上面的栗子,我们可以发现,原来split()和join()结合可以还原字符串原来的样子;
现在,我们做一些样式上的改变,即可完成高亮显示关键词的效果:
实现效果:

Code:
<!DOCTYPE html>
<html>
<head>
<title>搜索结果高亮显示</title>
<meta charset="utf-8"/>
<style type="text/css">
span{background-color: brown;color: #fff;border-radius: 3px;padding: 3px 5px;}
div{line-height: 1.8em;}
</style>
</head>
<body> <input type="text" id="txt" /><button id="btn">搜索</button> <div id="content">
<p>我没有说谎 我何必说谎<br/>
你懂我的 我对你从来就不会假装<br/>
我哪有说谎 请别以为你有多难忘<br/>
笑是真的不是我逞强</p>
</div> <script type="text/javascript"> var oTxt=document.getElementById('txt');
var oBtn=document.getElementById('btn');
var oContent=document.getElementById('content'); oBtn.onclick=function(){
var str=oTxt.value;//key words
if(!str)return;//不输入内容,返回
oContent.innerHTML=oContent.innerHTML.split(str).join('<span>'+str+'</span>');
} </script> </body>
</html>
Javascript:数组和字符串的相互转化的更多相关文章
- js数组的操作及数组与字符串的相互转化
数组与字符串的相互转化 <script type="text/javascript">var obj="new1abcdefg".replace(/ ...
- 舌尖上的javascript数组和字符串基本操作
Javascript数组基本操作 Javascript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数,然而这些数字索引在内部被转换为字符串类型,这是因为javascrip ...
- JavaScript 数组、字符串、Map、Set 方法整理
在线阅读 https://www.kancloud.cn/chenmk/web-knowledges/1080519 数组 isArray():Array.isArray(value) 用于检测变量是 ...
- Javascript 数组 数字 字符串 时间等使用
1.Javascript 数组API 1. //定义数组 2. var pageIds = new Array(); 3. pageIds.push('A'); 5. 数组长度 6. pageIds. ...
- js 数组与字符串的相互转化
数组转字符串:join() 字符串转数组:split('')
- JavaScript数组转字符串,字符串转数组
//--------------------数组转字符串--------------------------- //需要将数组元素用某个字符连接成字符串 var a1, b1,c1; a1 = [&q ...
- JavaScript数组与字符串常用方法总结
先来一段代码引子: var str='hello world'; alert(str.charAt());//通过下标查找值: alert(str.indexOf());//通过值查找字符串下标:没有 ...
- javascript数组与字符串之间转换
一.数组转字符串(将数组元素用某个字符连接成字符串) var a, b;a = new Array(0,1,2,3,4);b = a.join("-"); 二.字符串转数组(将字符 ...
- Javascript数组与字符串常用api
目录 javaScript(api学习) 数组有关的api 创建数组 数组的增删改查 indexOf(); push(),pop(),unshift(),shift() forEach() map() ...
随机推荐
- 【转】app瘦身
iPhone经过这几年的发展,已经发生了很大的变化,例如屏幕变得更加多样,尺寸更多,内存变得更大,CPU的架构也在变化.伴随着iPhone的变化,iOS也在变化,例如AutoLayout.size c ...
- ajax请求在ie8下缓存问题
我今天在改项目bug的时候,发现ajax请求在ie8下有缓存,在缓存过期之前,针对相同地址发起的多个Ajax请求,只有第一次会真正发送到服务端.在某些情况下,这种默认的缓存机制并不是我们希望的(比如获 ...
- 注意 reader["yjID"] == DBNull.Value而不是null
自己做的项目吃的大亏,由于原始数据yjID这个字段里面什么都没有,所以,这个地方报错,说是字符串格式不支持,应该为DBNull.Value而不是null,DBNull.Value代表数据库(用的acc ...
- \r \n有什么区别
'\r'是回车,'\n'是换行,前者使光标到行首,后者使光标下移一格.通常用的Enter是两个加起来.下面转一篇文章. 回车和换行 今天,我总算搞清楚“回车”(carriage return)和“换行 ...
- .net面试总结
一. hr 为人处事 工作中遇到问题:沟通很重要 离职原因:公司倒闭 二. ISAPI Internet Server Application Program Interface 三. http状态码 ...
- Nagios配置—添加linux主机监控
nagios安装请参看:Nginx平台安装Nagios监控服务 下面是我添加linux监控机的过程,如有错误或者不当的地方请指出: 测试环境: 监控主机:nagios+nagios插件+nrpe+网站 ...
- 【转】Understanding and Using rem Units in CSS
CSS units have been the subject of several articles here on SitePoint (such as A Look at Length Unit ...
- 武汉科技大学ACM :1010: 零起点学算法12——求2个日期之间的天数
Problem Description 水题 Input 输入2个日期,日期按照年月日,年月日之间用符号-隔开(题目包含多组数据) Output 求出这2个日期之间的天数(不包括自身),每组测试数据一 ...
- 移植openssh到nuc951 evb板
移植openssh到nuc951 evb板 一 应用环境: 硬件:nuc951evb 软件:linux2.6.35 bsp 二 交叉编译openssl openssh 1.下载 openssl-1.0 ...
- 移动端(html5)微信公众号下用keyup实时监控input值的变化无效
搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公 ...