JS中的Replace方法使用经验分享

JavaScript026

JS中的Replace方法使用经验分享,第1张

本文给大家分享的是我们在使用javascript中的replace方法的时候需要注意的一个事项，我就是没有注意到，才被这个bug烦了好久，这里记录下来，有需要的小伙伴可以参考下。

最近查一个bug，原因是JS中的Replace方法造成的，当将一个字符串中有处需要替换时，一般会用到JS中的Replace方法，Replace方法的第一个参数如果是传的字符串，只会替换第一处。代码如下：

复制代码

代码如下:

var

str

=

"0CEA65D5-DB8E-4876-A6F8-C88AC7F0E185,E846C244-8A19-4374-879B-0B1DC08D1747,6CB3EBA4-1E22-4E4D-8800-AE31130B6F5D"

alert(str.replace(",","','"))

上面的代码本意是将用逗号隔开的GUID的逗号替换成','，但实际结果只将第一个逗号替换了。

解决这个问题只需将replace的第一个参数使用正则的方式即可，代码如下:

复制代码

代码如下:

var

reg

=

new

RegExp(",","g")

var

str

=

"0CEA65D5-DB8E-4876-A6F8-C88AC7F0E185,E846C244-8A19-4374-879B-0B1DC08D1747,6CB3EBA4-1E22-4E4D-8800-AE31130B6F5D"

alert(str.replace(reg,"','"))

结果如下：

以上所述就是文本的全部内容了，希望对大家学习javascript能够有所帮助。

<!DOCTYPE html>

<html>

<head>

    <title>test</title>

    <script>

        function replace(tag, value) {

            return String.prototype.replace.call(value, tag, arguments[2])

        }

        function format() {

            var html = document.body.innerHTML

            var tag = "salutation|invoice|time|item|threaten"

            var reg = new RegExp("(<span[^>]*id[=\"\'\\s]+(" + tag + ")[\"\'\\s]+>)((?:(?!<\\/span>)[\\s\\S])*)(<\\/span>)", "gi")

            html = replace(reg, html, function(a, a1, a2, a3, a4) {

                var str = ""

                if (a2 == "salutation") {

                    str = "Mr. Smith"

                } else if (a2 == "invoice") {

                    str = 123

                } else if (a2 == "item" || a2 == "time") {

                    str = 'flux capacitor'

                } else if (a2 == "threaten") {

                    str = 'Please do not make me angry.'

                }

                tag = tag.replace(new RegExp("\\|?" + a2 + "\\|?", "g"), "|").replace(/^\||\|$/g, "")

                var result = a1 + str + a4

                return result

            })

            //改变每个span后所有单词的首字母改为大写

            reg = /(<span[^>]*>)((?:(?!<\/span>)[\s\S])*)(<\/span>)/ig

            html = replace(reg, html, function(a, b, m, n) {

                return b + replace(/([a-z])([^\r\n\f\x20\t]*)/gi, m, function(c, d, e) {

                    return d.toUpperCase() + e

                }) + n

            })

            //如果tag不存在则弹出警告框“不存在”

            tag ? alert(tag.replace(/\|/g, ",") + "不存在") : 0

            document.body.innerHTML = html

        }

         //编写一个函数clearit(),从页面中删除所有包含在标记id =“buttons”的内容

        function clearit() {

            var btns = document.getElementById("buttons")

            btns.innerHTML = ""

        }

    </script>

</head>

<body>Dear <span id="salutation">Name</span>:

    <p>It has come to our attentation that your invoice <span id="invoice">ID</span>

        has yet to be paid.It has now been <span id="time">some time</span> since you received <span id="item">the material</span> from Evil Incorporated. Please remit payment immediately. <span id="threaten"></span>

    </p>Yours sincerely.

    <br />

    <br />

    <br />J.Smith,Accounting

    <div id="buttons">

        <center>

            <button onclick="format()">Format</button>

            <button onclick="clearit()">Clear</button>

        </center>

    </div>

</body>

</html>

replace函数一次只能替换一个目标字符串，可以配合while循环替换所有字符串。

1、在script标签中定义一个字符串，字符串内容为“一个中国北方的中国人在做中国结”，然后将内容输出在网页中：

2、使用replace函数，这时第一个“中国”文本被空字符串替换，但是还有两个“中国”文本没有被替换：

3、添加while循环，循环条件用“indexOf”函数来判断是否“中国”两个字还存在，如果存在则继续替换，不存在则结束，这时所有的目标字符串都被替换完成：