사용자가 본문 텍스트에서 구를 입력 한 다음 해당 텍스트를 사용자가 원하는대로 바꿀 수 있도록하고 싶습니다. 나는 .replaceWith()여기서 가장 좋을 것이라고 생각 하지만 그것을 구현하는 방법을 완전히 확신하지 못합니다.
다음은 입력 영역에 대한 HTML입니다.
<h2>Replace</h2>
<table>
<tr>
<td>Original:</td>
<td>
<input id="original" type="text" />
</td>
</tr>
<tr>
<td>New Text:</td>
<td>
<input id="newtext" type="text" />
</td>
</tr>
<tr>
<td colspan="2">
<input id="replace" type="button" name="save" value="Replace" />
</td>
</tr>
</table>
</div>
그리고 사용자가 #text(본문) 에서 단어 또는 구 를 입력 한 다음 입력의 새 텍스트 부분, 원본 텍스트를 대체 할 텍스트를 입력 할 수 있기를 바랍니다.
내가 어려운 문제를 안고있는 한 가지는 사용자가 "원본"텍스트에서 어떤 단어 나 구를 입력하고 "원본"텍스트를 원하는 것으로 바꿀 수 있다는 점을 고려하는 것입니다.
나는 뭔가 생각했다
$("table").click(function(){
$("#text").replaceWith("anything the user wants");
});
감사합니다!
모두
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#red").click(function(){
$("#text").css("color","red");
});
$("#blue").click(function(){
$("#text").css("color","blue");
});
$("#green").click(function(){
$("#text").css("color","green");
});
$("#times_new_roman").click(function(){
$("#text").css("font-family","'Times New Roman'");
});
$("#courier").click(function(){
$("#text").css("font-family","courier");
});
$("#comic_sans").click(function(){
$("#text").css("font-family","'Comic Sans MS'");
});
$("#arial").click(function(){
$("#text").css("font-family","Arial");
});
$('input[name="decoration"]').change(function(){
if ($(this).val() == 'bold'){
if ($(this).is(':checked')) $("#text").css('font-weight', "bold");
else $("#text").css('font-weight', "normal");
}
else if ($(this).val() == 'italic'){
if ($(this).is(':checked')) $("#text").css('font-style', "italic");
else $("#text").css('font-style', "normal");
}
});
$('input[name="font"]').bind('keypress', function (event) {
var regex = new RegExp("[0-9]");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
$("#up").click(function () {
var currentSize = $("#text").css("font-size");
currentSize = currentSize.replace(/[^\d.]/g, "");
currentSize++;
if(currentSize < 10 || currentSize > 80){
alert("Font-size between 10 and 80 only!");
}
else {
$("#text").css("font-size", "" + currentSize + "px");
}
});
$("#down").click(function () {
var currentSize = $("#text").css("font-size");
currentSize = currentSize.replace(/[^\d.]/g, "");
currentSize--;
if(currentSize < 10 || currentSize > 80){
alert("Font-size between 10 and 80 only!");
}
else {
$("#text").css("font-size", "" + currentSize + "px");
}
});
$('input[name="font"]').on("keyup change", function () {
var newSize = $(this).val();
if(newSize < 10 || newSize > 80){
alert("Font-size between 10 and 80 only!");
}
else {
$("#text").css("font-size", "" + newSize + "px");
}
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>INFO 2300 - HW1</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" title="StyleSheet" />
</head>
<body>
<div id="wrapper">
<h1>Super Cool Javascript Text Editor</h1>
<form id="controlForm" class="controls" action="index.php" method="post" onsubmit="return false;">
<div id="color">
<h2 class="test2">Font Color</h2>
<label for="red">Red</label>
<input type="radio" name="color" value="Red" id="red" /><br />
<label for="blue">Blue</label>
<input type="radio" name="color" value="Blue" id="blue" /><br />
<label for="green">Green</label>
<input type="radio" name="color" value="Green" id="green" /><br />
</div>
<div>
<h2>Font Family</h2>
<!-- Giving specific names, then generic ones, is useful for font families
because not everyone has every font. -->
<label for="courier">Courier</label>
<input type="radio" name="family" value="courier,monospace" id="courier" /><br />
<label for="times_new_roman">Times New Roman</label>
<input type="radio" name="family" value="times new roman,serif" id="times_new_roman" /><br />
<label for="arial">Arial</label>
<input type="radio" name="family" value="arial,sans-serif" id="arial" /><br />
<label for="comic_sans">Comic Sans MS</label>
<input type="radio" name="family" value="comic sans ms, sans-serif" id="comic_sans" /><br />
</div>
<div id="font">
<h2>Font Size</h2>
<input name="font" type="text" value="15"/>px
<br /><span id="sizeWarning"></span>
<div>
</div>
<h2>Text Decoration</h2>
<label for="bold">Bold</label>
<input type="checkbox" name="decoration" value="bold" id="bold" /><br />
<!-- Added for italic -->
<label for="italic">Italic</label>
<input type="checkbox" name="decoration" value="italic" id="italic" /><br />
</div>
<div>
<h2>Search Features [Already Implemented]</h2>
<input id="search" type="text" name="search"/>
</div>
<div>
<h2>Replace</h2>
<table>
<tr><td>Original: </td><td><input id="original" type="text" /></td></tr>
<tr><td>New Text: </td><td><input id="newtext" type="text" /></td></tr>
<tr><td colspan="2"><input id="replace" type="button" name="save" value="Replace" /></td></tr>
</table>
</div>
</form>
<form id="myform" class="test" action="saveFile.php" method="post">
<div id="saveResult" class="saveResult">
<input name="hiddentext" type="hidden" />
<input name="settings" type="hidden" />
<input name="savebutton" type="submit" value="Save file" />
</div>
</form>
<div id="text">
<?php
//reads in the file
$file = file("lorem.txt");
foreach($file as $line){
echo "<p>".$line."</p>";
}
?>
</div>
</div>
</body>
</html>
당신은
if (!RegExp.escape) {
RegExp.escape = function (s) {
return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
};
}
jQuery(function () {
$('#replace').click(function () {
var text = $('#original').val();
if (text) {
var regex = new RegExp(RegExp.escape(text), 'g');
$('h2').text(function (i, text) {
return text.replace(regex, $('#newtext').val())
})
}
})
})
데모 : Fiddle
간단한 정규식을 사용하여 대상에서 검색된 문자열을 바꿀 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다