• 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>
    

      

  • 相关阅读:
    简单网络问题排查记录一
    安装mysql_sniffer报错undefined reference to symbol 'pthread_setspecific@@GLIBC_2.2.5'问题
    tengine安装ngx_http_lua_module
    Django——URL详解/Django中URL是如何与urls文件匹配的
    Python学习——enumerate
    Python学习——装饰器/decorator/语法糖
    缓存优化
    页面重绘 回流及其优化
    window.getComputedStyle()方法的使用及其扩展
    java 三个循环的优缺点
  • 原文地址:https://www.cnblogs.com/kevinCoder/p/4573774.html
Copyright © 2020-2023  润新知