替换字符串的Jquery回退

Question

我的代码适用于支持jQuery的现代浏览器。但是有时会有访问者使用非常过时且不支持jQuery的浏览器。

代码的目的是搜索并用UTF8中文字母替换英文单词。

是否知道如何调优此代码以使其在较旧的浏览器中工作。

，谢谢！

  <script type="text/javascript">

    function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  $(selector).each(function () {
    var $this = $(this);
    if (!$this.children().length)
       $this.text($this.text().replace(matcher, newText));
  });
}

function replaceAllText() {
        replaceText('*', 'Due', '总数', 'g');
        replaceText('*', 'Pin', '配套PIN码', 'g');
        replaceText('*', 'No.', '编号', 'g');
   }

$(document).ready(replaceAllText);
$('html').ajaxStop(replaceAllText);

</script>

Answer 1

有些版本的jQuery支持浏览器回到(并包括) IE6。如果您需要支持过时的浏览器，请使用jQuery v1.x行中的最新版本。听起来您使用的是jQuery v2.x，甚至是jQuery 3.x，它只支持较新的浏览器。

附带注意:您的replaceText方法没有正确处理特殊的正则表达式字符，而且比需要的要复杂得多。下面是一个简单的版本，可以正确地处理特殊字符：

function replaceText(selector, regex, newText) {
    $(selector).not("script, style").each(function() {
        var node;
        for (node = this.firstChild; node; node = node.nextSibling) {
            if (node.nodeType === 3) {
                node.nodeValue = node.nodeValue.replace(regex, newText);
            }
        }
    });
}

function replaceAllText() {
    // Note that I'm defining the regular expression here, not in `replaceText`
    // It's too easy not to realize that you're doing a regex and include a
    // character that is special in regular expressions (like the `"."` in
    // `"No."` and end up matching things incorrectly.
    replaceText('*', /Due/g, '总数');
    replaceText('*', /Pin/g, '配套PIN码');
    replaceText('*', /No\./g, '编号');
}

​

function replaceText(selector, regex, newText) {
    $(selector).not("script, style").each(function() {
        var node;
        for (node = this.firstChild; node; node = node.nextSibling) {
            if (node.nodeType === 3) {
                node.nodeValue = node.nodeValue.replace(regex, newText);
            }
        }
    });
}

function replaceAllText() {
    // Note that I'm defining the regular expression here, not in `replaceText`
    // It's too easy not to realize that you're doing a regex and include a
    // character that is special in regular expressions (like the `"."` in
    // `"No."` and end up matching things incorrectly.
    replaceText('*', /Due/g, '总数');
    replaceText('*', /Pin/g, '配套PIN码');
    replaceText('*', /No\./g, '编号');
}

replaceAllText();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Due
  <div>
    Stuff
    <div>
      Pin No. Pin Due
    </div>
  </div>
</div>

​

注意，我们直接将DOM用于某些事情；在本例中，它与jQuery代码一样简单。但是，如果您希望尽可能多地使用jQuery，则replaceText将更改为：

function replaceText(selector, regex, newText) {
    $(selector).not("script, style").each(function() {
        $(this).contents().each(function() {
            if (this.nodeType === 3) {
                this.nodeValue = this.nodeValue.replace(regex, newText);
            }
        });
    });
}

​

function replaceText(selector, regex, newText) {
    $(selector).not("script, style").each(function() {
        $(this).contents().each(function() {
            if (this.nodeType === 3) {
                this.nodeValue = this.nodeValue.replace(regex, newText);
            }
        });
    });
}

function replaceAllText() {
    // Note that I'm defining the regular expression here, not in `replaceText`
    // It's too easy not to realize that you're doing a regex and include a
    // character that is special in regular expressions (like the `"."` in
    // `"No."` and end up matching things incorrectly.
    replaceText('*', /Due/g, '总数');
    replaceText('*', /Pin/g, '配套PIN码');
    replaceText('*', /No\./g, '编号');
}

replaceAllText();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Due
  <div>
    Stuff
    <div>
      Pin No. Pin Due
    </div>
  </div>
</div>

​

最后:我们可以通过让one通过DOM而不是3来提高整个过程的效率，使用一个带替换(this|that|theother)的正则表达式，然后在旧到新的映射中查找匹配的文本：

function replaceAllText() {
    var replacements = {
        "Due": "总数",
        "Pin": "配套PIN码",
        "No.": "编号"
    };
    var regex = /(?:Due|Pin|No\.)/g;
    $("*:not(script):not(style)").each(function() {
        $(this).contents().each(function() {
            if (this.nodeType === 3) {
                this.nodeValue = this.nodeValue.replace(regex, function(text) {
                    return replacements[text];
                });
            }
        });
    });
}

​

function replaceAllText() {
    var replacements = {
        "Due": "总数",
        "Pin": "配套PIN码",
        "No.": "编号"
    };
    var regex = /(?:Due|Pin|No\.)/g;
    $("*:not(script):not(style)").each(function() {
        $(this).contents().each(function() {
            if (this.nodeType === 3) {
                this.nodeValue = this.nodeValue.replace(regex, function(text) {
                    return replacements[text];
                });
            }
        });
    });
}

replaceAllText();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Due
  <div>
    Stuff
    <div>
      Pin No. Pin Due
    </div>
  </div>
</div>

​