zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    JDBC数据更新
    ResultSet 的Type属性
    iis7 和iis10 对json处理的不同,导致的JavaScript的不兼容
    噪音分贝DB,FFT. 振动加速度关系
    各个版本的版本sqlserver
    实战多线程交互
    OSS 真香,比FTP速度快多了。
    How to print a fast report in ZPL format
    新项目要用斑马打印机打标签
    蓝屏故障诊断工具Windows Debugger
  • 原文地址:https://www.cnblogs.com/kevinCoder/p/4573774.html
Copyright © 2011-2022 走看看