Web前端开发js拼接字符串工具

web前端开发需要什么技术
web前端开发用什么工具包
前端开发产业是指什么意思

html 代码片段

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
        <meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
        <title>Document</title>
    </head>
    <body>
        <head>
            <title>js拼接字符串工具</title>
            <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
            <style>
                body {
                    background: #f6f6f6;
                    font: 12px 微软雅黑;
                }
                section {
                    width: 1000px;
                    padding: 30px 0;
                    margin: 0 auto;
                }
                textarea {
                    width: 99%;
                    border: 1px solid #e6e6e6;
                    height: 220px;
                    font-family: Verdana;
                }
                p {
                    font-size: 14px;
                    margin: 5px;
                }
                div {
                    margin: 5px;
                }
                input[type=’button’] {
                    border: none;
                    background: #ff6100;
                    color: #fff;
                    padding: 5px 20px;
                    cursor: pointer;
                }
                input[type=’button’]:hover {
                    background: #ff863e;
                }
                ::selection {
                    color: #fff;
                    background: #ff6100;
                }
            </style>
            <script src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>
            <script>
                $(function() {
                    var $singleBtn = $(‘#singleQuote’),
                        $doubleBtn = $(‘#doubleQuote’),
                        $arrayChk = $(‘#arrayCheck’),
                        $source = $(‘#source’),
                        $result = $(‘#result’)
                    $source.mouseover(function() {
                        this.focus()
                        this.select()
                    })
                    $result.mouseover(function() {
                        this.focus()
                        this.select()
                    })
                    $singleBtn.click(function() {
                        var isArrayCheck = $(‘#arrayCheck’).prop(‘checked’),
                            resultArr = getResult(
                                $source.val(),
                                true,
                                isArrayCheck,
                            )
                        $result.val(resultArr.join(”))
                    })
                    $doubleBtn.click(function() {
                        var isArrayCheck = $(‘#arrayCheck’).prop(‘checked’),
                            resultArr = getResult(
                                $source.val(),
                                false,
                                isArrayCheck,
                            )
                        $result.val(resultArr.join(”))
                    })
                })
                function getResult(source, isSingle, isToArray) {
                    var sourceArr,
                        resultArr = [],
                        exp = /(\’)|(\”)|(\\)/g,
                        value
                    sourceArr = $.trim(source)
                        .replace(exp, function(
                            match,
                            singleQuote,
                            doubleQuote,
                            backslash,
                        ) {
                            if (singleQuote) return isSingle ? “\\'” : match
                            if (doubleQuote) return isSingle ? match : ‘\\”‘
                            if (backslash) return ‘\\\\’
                        })
                        .split(‘\n’)
                    if (isToArray) {
                        resultArr.push(‘[‘)
                        for (var i = 0, len = sourceArr.length; i < len; i++) {
                            value = $.trim(sourceArr[i])
                            if (value !== ”) {
                                if (i === len – 1) {
                                    isSingle
                                        ? resultArr.push(“‘” + value + “‘”)
                                        : resultArr.push(‘”‘ + value + ‘”‘)
                                } else {
                                    isSingle
                                        ? resultArr.push(“‘” + value + “‘,\n”)
                                        : resultArr.push(‘”‘ + value + ‘”,\n’)
                                }
                            }
                        }
                        resultArr.push(‘].join(“”);’)
                    } else {
                        for (var i = 0, len = sourceArr.length; i < len; i++) {
                            value = $.trim(sourceArr[i])
                            if (value !== ”) {
                                if (i === len – 1) {
                                    isSingle
                                        ? resultArr.push(“‘” + value + “‘;”)
                                        : resultArr.push(‘”‘ + value + ‘”;’)
                                } else {
                                    isSingle
                                        ? resultArr.push(“‘” + value + “‘+\n”)
                                        : resultArr.push(‘”‘ + value + ‘”+\n’)
                                }
                            }
                        }
                    }
                    return resultArr
                }
            </script>
        </head>
        <section>
            <p>要拼接的字符串:</p>
            <textarea id=”source”>
    &lt;div id=&quot;container&quot;&gt;
     &lt;p&gt;单引号”’&lt;/p&gt;
     &lt;p&gt;双引号&quot;&quot;&quot;&lt;/p&gt;
     &lt;p&gt;反斜杠加单引号\’\’\’&lt;/p&gt;
     &lt;p&gt;反斜杠加双引号\&quot;\&quot;\&quot;&lt;/p&gt;
    &lt;/div&gt;
    </textarea
            >
            <div>
                <input id=”singleQuote” type=”button” value=”单引号” />
                <input id=”doubleQuote” type=”button” value=”双引号” />
                <input
                    id=”arrayCheck”
                    type=”checkbox”
                    checked=”checked”
                />数组拼接
            </div>
            <p>拼接后的js代码:</p>
            <textarea id=”result”></textarea>
        </section>
    </body>
</html>
前端开发和什么打交道
前端开发项目是什么意思
web前端开发需考什么证书
» 本文来自:前端开发者 » 《Web前端开发js拼接字符串工具》
» 本文链接地址:https://www.rokub.com/7398.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!