中午吃饭的时候，和室友讨论前端的问题，然后一个有趣的问题被抛出来：

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:数组和字符串的相互转化的更多相关文章

  1. js数组的操作及数组与字符串的相互转化

    数组与字符串的相互转化 <script type="text/javascript">var obj="new1abcdefg".replace(/ ...

  2. 舌尖上的javascript数组和字符串基本操作

    Javascript数组基本操作 Javascript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数,然而这些数字索引在内部被转换为字符串类型,这是因为javascrip ...

  3. JavaScript 数组、字符串、Map、Set 方法整理

    在线阅读 https://www.kancloud.cn/chenmk/web-knowledges/1080519 数组 isArray():Array.isArray(value) 用于检测变量是 ...

  4. Javascript 数组 数字 字符串 时间等使用

    1．Javascript 数组API 1. //定义数组 2. var pageIds = new Array(); 3. pageIds.push('A'); 5. 数组长度 6. pageIds. ...

  5. js 数组与字符串的相互转化

    数组转字符串:join() 字符串转数组:split('')

  6. JavaScript数组转字符串，字符串转数组

    //--------------------数组转字符串--------------------------- //需要将数组元素用某个字符连接成字符串 var a1, b1,c1; a1 = [&q ...

  7. JavaScript数组与字符串常用方法总结

    先来一段代码引子: var str='hello world'; alert(str.charAt());//通过下标查找值: alert(str.indexOf());//通过值查找字符串下标:没有 ...

  8. javascript数组与字符串之间转换

    一.数组转字符串(将数组元素用某个字符连接成字符串) var a, b;a = new Array(0,1,2,3,4);b = a.join("-"); 二.字符串转数组(将字符 ...

  9. Javascript数组与字符串常用api

    目录 javaScript(api学习) 数组有关的api 创建数组 数组的增删改查 indexOf(); push(),pop(),unshift(),shift() forEach() map() ...

随机推荐

  1. Tomcat 加入windows 服务自启动设置

    基于J2ee技术开发,可以运行在Tomcat.weblogic.websphere等J2ee应用服务器上,对于一般访问量不是很高的客户我们推荐使用Tomcat(开源免费),一般情况下Tomcat服务需 ...

  2. css中同时用头部引入和外部引入对同一个标签进行样式设置，哪一个优先级高。

    这段是html中的代码 <!doctype html> <html lang="en"> <head> <meta charset=&qu ...

  3. mongodb创建副本集命令

    mongodb创建副本集命令 ./mongod --replSet spock --dbpath ../data --smallfiles > config ={... "_id&qu ...

  4. c# 语句关键字

    1. yield 它表明一个方法,操作符或者get选择器里会出现迭代. 用yield return 同时返回每一个元素,  返回类型必须是IEnumerable, IEnumerable<T&g ...

  5. win7下如何执行批处理文件

    经过了一段时间的适应之后,某C也基本摸透了Win7的习性,然后突然发现无聊,就上了VeryCD去下载几个游戏玩.R大是电驴游戏版块的大神,某C怀着崇敬的心情,每每都追寻着他的足迹下载游戏.这次正好下载 ...

  6. eclipse在当前项目里面批量替换所有单词

    ctrl+f里面只能单个文件用,要整个项目批量替换. 1. 先选中你要替换字符串, 2. 再菜单栏中找到Search→Text→Project,这样就会在整个项目中查找单词. 3. 然后在Search ...

  7. 在线支付接口之PHP支付宝接口开发

    支付接口一般是第三方提供的代收款.付款的平台,可以通过支付接口帮助企业或个人利用一切可以使用的支付方式.常见支付平台:支付宝.快钱.云网支付.财付通. 支付宝页面:订单页面.状态页面.返回页面.--- ...

  8. Ubuntu 12.04更换显示器后显示“显示不支援”，只能进恢复模式工作

    以前用的一台14寸液晶,换成17寸后,进入系统显示器上“显示不支援”  .仔细观查,电脑硬盘自检能显示后,后面都是黑屏. 解决过程. 因为grub 启动菜单不能显示.盲按方向键,发现菜单里的其它项目可 ...

  9. c++中构造函数 、析构函数的作用域详解

    我们知道,在c++中,析构函数是在函数作用域尾部执行析构函数,从而释放对象,但是有一种情况下,析构函数作用域发生变化,请看下面的例子,定义了一个Stock类,Stock类存放在stock.h中,主调用 ...

  10. Ubuntu 下升级git到最新版

    $ sudo add-apt-repository ppa:git-core/ppa $ sudo apt-get update $ sudo apt-get install git