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的亮點正則表達式插件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); 
    } 
});