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>

谢谢大家!

全部

$（文档）.ready（函数（）{
$（“#红色”）。单击（函数（）{
$（“文本”）.css（“颜色”、“红色”）；
});
$（“#蓝色”）。单击（函数（）{
$（“文本”）.css（“颜色”、“蓝色”）；
});
$（“#绿色”）。单击（函数（）{
$（“文本”）.css（“颜色”、“绿色”）；
});
$（“#times_new_roman”）。单击（函数（）{
$（“#text”）.css（“字体系列”，“新罗马时代”）；
}); 
$（“#courier”）。单击（函数（）{
$（“#text”）.css（“字体系列”、“信使”）；
}); 
$（“#comic_sans”）。单击（函数（）{
$（“#text”）.css（“字体系列”，“漫画无MS”）；
}); 
$（“#arial”）。单击（函数（）{
$（“#text”）.css（“字体系列”、“Arial”）；
}); 
$（'input[name=“decoration”]”）。更改（函数（）{
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”]”）。绑定（'keypress'，函数（事件）{
var regex=new RegExp（“[0-9]”）；
var key=String.fromCharCode（！event.charCode？event.which:event.charCode）；
如果（！正则表达式测试（键））{
event.preventDefault（）；
返回false；
}
});
$（“#向上”）。单击（函数（）{
var currentSize=$（“#文本”）.css（“字体大小”）；
currentSize=currentSize.replace（/[^\d.]/g，”）；
currentSize++；
如果（currentSize<10 | | currentSize>80）{
警告（“字体大小仅限10到80之间！”）；
}
否则{
$（“#text”）.css（“字体大小”，“当前大小+”px”）；
}
});
$（“#向下”）。单击（函数（）{
var currentSize=$（“#文本”）.css（“字体大小”）；
currentSize=currentSize.replace（/[^\d.]/g，”）；
当前大小--；
如果（currentSize<10 | | currentSize>80）{
警告（“字体大小仅限10到80之间！”）；
}
否则{
$（“#text”）.css（“字体大小”，“当前大小+”px”）；
}
});
$（'input[name=“font”]”）。在（“keyup change”，函数（）上{
var newSize=$（this.val（）；
如果（新闻大小<10 | |新闻大小>80）{
警告（“字体大小仅限10到80之间！”）；
}
否则{
$（“#text”）.css（“字体大小”，“新闻大小+”px”）；
}
});
});
信息2300-HW1
超级酷的Javascript文本编辑器
字体颜色
红色


蓝色


绿色


字体系列
信使


新罗马时代


Arial


连环漫画


字号
二甲苯


文字装饰
大胆的


斜体


搜索功能[已实现]
代替
原件：
新案文：

您可以使用 $（'#text'）.text（'任何您想要的'）

你是说像

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

演示：

---

您可以使用一个简单的正则表达式替换目标中的搜索字符串。如果我理解正确，您要做的是替换div#text中的一个单词，其中每行文本都被包装在

标记中。（这是故意的吗？如果不是，请在评论中告诉我，我会在一个P标签中添加答案。）

回答这个问题的步骤是：

获取元素的文本
进行搜索并替换
在元素#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()));*/
}

建议
将所有文本放入
包装器中。这样做：

<?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>";
?>


$（“表”）。单击（函数（）{$（“#文本”）。替换为（“用户想要的任何内容”）；}）；那么，在您需要的地方，我如何使用户输入的任何内容都只需使用$this或？使用$（“#newtext”）.val（）替换为您想要实现的内容？如果我理解正确，您不希望用户能够编辑第一个输入框？您可以使用“只读”属性。您还可以演示如何使用
#text
元素吗？查看输入的原始位置？我的页面上有一段文字。我希望用户从该段文本（#text）中输入一个短语或单词，然后能够用输入框中输入的任何内容替换该单词或短语。我将发布我的整个html/js，以便您可以看到。有点像
replaceWith（）
是用来替换DOM对象的。你想要字符串。替换。我想这回答了问题。您可以使用sugarJS来避免编写自己的转义函数（以及JavaScript应该具备的一百种其他功能）：-）啊，谢谢。只有几个问题。如果我不希望用户输入任何html标记或奇怪的东西，只需在$.replace（）部分中允许字母、数字和空格，对吗？另外，您在代码中的什么地方做的，以便用户可以在替换部分中输入任何内容？这真的让我大吃一惊，我很想知道未来的项目我想你们可以允许用户输入任何东西
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()));*/
}

<?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>";
?>