javascript - jQuery 在大量文本中查找/替换

Question

我正在使用 jQuery，我需要为从文本文件“example.txt”中提取的文本创建一个查找/替换表单。

首先，这是 HTML:

<div id="outbox" class="outbox">
<h3>Output</h3>
<div id="output"></div>
</div>
<div class="content">
<h3>Text File Location</h3>
<br />
<form id="prac" action="prac9.html">
    <input id="locator" type="text" value="example.txt" /> <br />
    <input id="btnlocate" value="Load" type="button" />
</form>
<br />
<h3>String Search</h3>
<form id="prac2" action="prac9.html">
    <div id='input'><input type='text' id='fancy-input'/> ...Start Typing</div> <br />

</form>
<br />
<h3>Find / Replace String</h3>
<form id="prac3" action="prac9.html">
    <input id="findtxt" type="text" value="" /> Find <br />
    <input id="replacetxt" type="text" value="" /> Replace<br />
    <input id="btnreplace" value="Find & Replace" type="button" />
</form>
</div>

这是 jQuery/JS:

<script type="text/javascript">

$('#btnlocate').click(function () {

    $.get($('#locator').val(), function (data) {
        var lines = data.split("\n");
        $.each(lines, function (n, elem) {
            $('#output').append('<div>' + elem + '</div>');
            // text loaded and printed
        });
    });
});

/* SEARCH FUNCTION */

$(function () {       

    $('#fancy-input').keyup(function () {
        var regex;
        $('#output').highlightRegex();
        try { regex = new RegExp($(this).val(), 'ig') }
        catch (e) { $('#fancy-input').addClass('error') }

        if (typeof regex !== 'undefined') {
            $(this).removeClass('error');
            if ($(this).val() != '')
                $('#output').highlightRegex(regex);
        }
    })
});

 /* SEARCH FUNCTION FOR FIND REPLACE */
 $(function () {
    $('#findtxt').keyup(function () {
        var regex;
        $('#output').highlightRegex();
        try { regex = new RegExp($(this).val(), 'ig') }
        catch (e) { $('#findtxt').addClass('error') }

        if (typeof regex !== 'undefined') {
            $(this).removeClass('error');
            if ($(this).val() != '')
                $('#output').highlightRegex(regex);
        }
        })
    });

 /* regexp escaping function */

  RegExp.escape = function (str) {
      return String(str).replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
  };

    $('#btnreplace').click(function () {
        var needle = $('#findtxt').val();
        var newneedle = $('#replacetxt').val();
        var haystack = $('#output').text();
      //  var regex = new RegExp(needle, "g");
        haystack = haystack.replace(new RegExp(RegExp.escape(needle), "g"), newneedle);
        console.log(haystack);
    });

正如您可能已经注意到的，我使用了一个插件“jQuery Highlight Regex Plugin v0.1.1”(如果相关的话)。

http://pastebin.com/HmqWmKsy是“example.txt”(如果也相关)。

我所需要的只是一种简单的方法来执行此查找/替换，但网络上的所有内容都还没有帮助我。

如果您需要更多信息，请告诉我。

Answer 1

使用replace和正则表达式，您走在正确的轨道上。您想要添加“全局”标志 (g)，并且必须通过 new RegExp(string) 创建表达式，因为您的 needle 是一个字符串。例如:

haystack = haystack.replace(new RegExp(needle, "g"), newNeedle); // BUT SEE BELOW

以上几乎有效，除非needle中有任何在正则表达式中特殊的字符(*， [] 等)，显然 new RegExp 会尝试解释它们。不幸的是，RegExp 没有转义字符串中所有正则表达式字符的标准方法，但您可以添加它:

RegExp.escape = function(str) {
  return String(str).replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
};

(来自 Prototype ，但我们可以复制它而不是实际使用整个库，它是 MIT 许可的。请务必在源中注明属性。或者也可以使用其他地方的 this version 。)

所以我们最终得到:

haystack = haystack.replace(new RegExp(RegExp.escape(needle), "g"), newNeedle);

<小时/>

这是一个完整的工作示例:Live copy | source

HTML:

<div>
  <label>Haystack:
    <br><textarea id="theHaystack" rows="5" cols="50">Haystack with test*value more than once test*value</textarea>
  </label>
</div>
<div>
  <label>Needle:
    <br><input type="text" id="theNeedle" value="test*value">
  </label>
</div>
<div>
  <label>New Needle:
    <br><input type="text" id="theNewNeedle" value="NEW TEXT">
  </label>
</div>
<div>
  <label>New haystack:
    <br><textarea readonly id="theNewHaystack" rows="5" cols="50"></textarea>
  </label>
</div>
<div>
  <button id="theButton">Replace</button>
</div>

JavaScript:

RegExp.escape = function(str) {
  return String(str).replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
};
jQuery(function($) {

  $("#theButton").click(function() {
    var haystack = $("#theHaystack").val(),
        needle   = $("#theNeedle").val(),
        newNeedle = $("#theNewNeedle").val(),
        newHaystack;

    if (!haystack || !needle) {
      display("Please fill in both haystack and needle");
      return;
    }

    newHaystack = haystack.replace(
      new RegExp(RegExp.escape(needle), "g"),
      newNeedle);
    $("#theNewHaystack").val(newHaystack);
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});