找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发 JS 文本查找并替换字符

2018-08-23 22:44:57 分类：JavaScript / 面试 阅读(121) 评论(0)

关于前端开发需要的主要技能 前端和软件开发 前端开发软件前十

html 代码

<!DOCTYPE html>
<head>
    <style type=”text/css”>
        * {
            font-family: “微软雅黑”;
            font-size: 16px;
            margin: 0;
            padding: 0;
            letter-spacing: 3px;
            line-height: 22px;
        }
        #wrap {
            width: 500px;
            height: 300px;
            margin: 20px auto;
            position: relative;
        }
        #text {
            width: 500px;
            height: 300px;
            border: 1px solid green;
        }
        #result {
            width: 500px;
            position: absolute;
            left: 0px;
            top: 0px;
            display: none;
        }
        input {
            width: 100px;
            height: 40px;
            margin-top: 5px;
        }
        span {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id=”wrap”>
        <div id=”result”></div>
        <textarea id=”text” placeholder=”请在此输入文本。。。。”></textarea>
        <input type=”text” id=”val” placeholder=”被查找字符” />——<input type=”text” id=”new_val” placeholder=”替换后字符” />&nbsp;&nbsp;&nbsp;
        <input type=”button” id=”btnFind” value=”替换” />&nbsp;&nbsp;&nbsp;<input type=”button” value=”重置” id=”reset” />
    </div>
    <script type=”text/javascript”>
        function replace() {
            var inner = null;
            var txt = document.getElementById(‘text’).value.toString();
            var val = document.getElementById(‘val’).value.toString();
            var newVal = document.getElementById(‘new_val’).value.toString();
            newInner = “<span>” + newVal + “</span>”;
            for (var i = 0; i <= txt.length – val.length; i++) {
                if (txt == “” || val == “”) {
                    alert(“请输入内容！”);
                    return false;
                }
                if (txt.length < val.length) {
                    return false;
                }
                if (i + val.length >= txt.length) {
                    if (txt.substring(i) == val) {
                        inner = txt.split(”);
                        inner.splice(i, val.length, newInner);
                        txt = inner.join(“”);
                        i = i + newInner.length – 1;
                    }
                }
                else {
                    if (txt.substring(i, i + val.length) == val) {
                        inner = txt.split(”);
                        inner.splice(i, val.length, newInner);
                        txt = inner.join(“”);
                        i = i + newInner.length – 1;
                    }
                }
            }
            document.getElementById(“result”).innerHTML = txt;
            document.getElementById(“text”).value = null;
            document.getElementById(“text”).placeholder = “”;
            document.getElementById(“result”).style.display = “block”;
        }
        document.getElementById(‘btnFind’).onclick = function () {
            replace();
        }
        document.getElementById(‘reset’).onclick = function () {
            document.getElementById(“result”).style.display = “none”;
            document.getElementById(“val”).value = null;
            document.getElementById(“new_val”).value = null;
            document.getElementById(“text”).placeholder = “请在此输入文本。。。。”;
        }
    </script>
    </div>
</body>
</html>

前端开发人员需要考哪些证书 ios前端开发软件 php前端开发面试题

» 本文来自：前端开发者 » 《前端开发 JS 文本查找并替换字符》
» 本文链接地址：https://www.rokub.com/5375.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论