堆栈内存溢出
  繁体   English   中英

使用jQuery replaceWith（）将所选文本替换为输入文本

[英]Using jQuery replaceWith() to replace selected text with input text

 原文  2014-02-19 02:18:19  6   3    javascript/ jquery

问题描述

我希望让用户能够从正文中输入短语，然后用用户想要的内容替换该文本。 我相信.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>

3 个解决方案

解决方案1
 1 已采纳  2014-02-19 02:30:15

你的意思是像 

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())
            })
        }
    })
})

演示： 小提琴

您可以使用简单的正则表达式替换目标中搜索到的字符串

解决方案2
 0  2014-02-19 02:23:39

您可以只使用$（'＃text'）。text（'任何您想要的东西'）;

解决方案3
 0  2014-02-19 02:36:36

如果我理解正确，那么您想要做的就是替换div＃text中的单个单词，其中每行文本都包装在<p></p>标记内。 （这是故意的吗？如果没有，请在评论中告诉我，我将回答您如何将其全部保存在一个P标签中。）

回答这个问题的步骤是：

  1. 获取元素的文本
  2. 搜索并替换
  3. 在元素#text上设置新文本

为此： 

function replaceTextAtDiv(){
    var div_text = $("#text").text();
    var textToReplace = $("#original").val();
    var newText = $("#newtext").val();
    div_text.replace(textToReplace, newText);
    $("#text").text(div_text);

    /* OR - In One Line

    /$("#text").text($("#text").text().replace($("#original").val(), $("#newtext").val()));*/
}

建议将所有文本放入<p></p>包装器中。 像这样做： 

<?php
    //reads in the file
    $file = file("lorem.txt");
    $string = "";
    foreach($file as $line){
        $string = $string . "\n" . $line; //Take away [  . "\n" ] if it generates 2 line breaks.
    }
    echo "<p>".$string."</p>";
?>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JQuery 使用 replaceWith 将输入替换为 select jQuery使用方法replaceWith（）替换输入占位符 用.replaceWith（）替换按钮文本 使用jQuery刷新标签：text（）或replaceWith（） 设置使用jquery选择的创建的输入文本 使用jQuery在输入框中显示所选文本 jQuery输入replaceWith（）在重新加载时选择并记住 用jquery / javascript替换所选文本 使用jQuery的.replaceWith函数替换部分文本 使用正则表达式（regex）替换jQuery / JavaScript中的选定文本
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM